VUE组件相关总结！

定义使用一个组件　　

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://lib.baomitu.com/vue/2.5.21/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <!--定义组件-->
    <template id="acc">
        <div>
            {{msg}}
            <h3>账号</h3>
            <h3>密码</h3>
            <button @click="login">登录</button>
        </div>
    </template>
    <!--使用组件-->
    <div id="app">
        <acc1></acc1>
    </div>

    <script type="text/javascript">
        // 注册组件
        Vue.component('acc1',{
            template:'#acc',
            // 组件的数据
            data:function(){
                return{
                    msg:"hello"
                }
            },
            // 组件的方法
            methods:{
                login:function(){
                    console.log("执行登录");
                }
            }
        });
        new Vue({
            // 管理边界
            el:'#app',
            // 数据
            data(){
                return {
                    
                    
                }    
            },
            // 方法
            methods:{
                
            }
        })
    </script>
</body>
</html>

父组件传值到子组件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://lib.baomitu.com/vue/2.5.21/vue.js"></script>
    <title>父组件传值给子组件</title>
</head>
<body>
    <!--定义组件-->
    <template id="acc">
        <div>
            <h1>组件:{{name1}}</h1>
        </div>
    </template>
    <!--使用组件-->
    <div id="app">
        <acc1 :name1="name"></acc1>
    </div>

    <script type="text/javascript">
        // 注册组件
        Vue.component('acc1',{
            template:'#acc',
            // 接收数据
            props:{
                name1:String //文本用String 数字用Number
            }
            
        });
        new Vue({
            // 管理边界
            el:'#app',
            // 数据
            data(){
                return {
                    name:"小明"
                }    
            },
            // 方法
            methods:{
                
            }
        })
    </script>
</body>
</html>

子组件传值到父组件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://lib.baomitu.com/vue/2.5.21/vue.js"></script>
    <title>子组件传值给父组件</title>
</head>
<body>
    <!--定义组件-->
    <template id="acc">
        <div>
            <h1 @click="sendData">发送数据</h1>
        </div>
    </template>
    <!--使用组件-->
    <div id="app">
        <acc1 v-on:send="getData"></acc1>
    </div>

    <script type="text/javascript">
        // 注册组件
        Vue.component('acc1',{
            template:'#acc',
            methods:{
                sendData(input){
                    this.$emit('send',123);
                }
            }
            
        });
        new Vue({
            // 管理边界
            el:'#app',
            // 数据
            data(){
                return {

                }    
            },
            methods:{
                getData(input){
                    console.log(input);
                }
            }
        })
    </script>
</body>
</html>

VUE组件相关总结！

猜你喜欢