vue 组件的传参

组件的传参

普通方式

父传 属性名随意写 使用v-bind绑定属性的方式

<k-div :pages=age></k-div>

子接 ：使用属性props
props：使用储存数据，组件内部数据的使用方式和data一致，直接通过this来调用
注意点： 可复用性组件里，一个组件的模板必须具备一个根节点

        Vue.component("k-div",{
            props:['pages'],
            template:`  <div>
                            <div>哈哈{{name}}</div>
                            <div>呵呵{{pages}}</div>
                        </div>
                        `,
            //注意  这里
            data(){
                return{
                    name:"这里的data是自身的数据"
                }
            },
        })

        let app = new Vue({
            el:"#app",
            data:{
                name:"张三",
                age:20,
            },
            methods: {
                gender(){
                    return this.name;
                }
            },
        })

子传父接

1. 子级执行 $emit() 来触发自定义事件 参1:自定义事件 参2:数据
   这里的事件名不包含大写字母可以带 短横线
   2. 父级监听：子级触发的自定义事件
   3. 监听到触发 执行父级的回调函数

       Vue.component("k-div",{
            data(){
                return{
                    name:"小祥子"
                }
            },
            template:`<div>
                        <p>我是老大</p>
                        <p>我是老二</p>
                        <button @click="go">我是子组价的按钮</button>
                      </div>                   
                    `,
            methods: {
                go(){
                        // if(){ 这里如果需求较多 还有其他的条件
                           this.$emit("hello-world",this.name) 
                        // }           自定义事件    子元素的参数                                        
                }
            },
        })
        let app = new Vue({
            el:"#app",
            data:{
                name:"大祥子"
            },
            methods: {
              fn(n){//这个函数点击才触发，
                //   if(n =  Object) return
                  console.log("我是监听来的")
                  console.log(n);
                  this.name = n; //点击后 子级的参数会传递过来
                  console.log(this.name)
              }  
            },
        })

双向数据绑定方式

基本原理与普通方式一致，自是写法添加model选项

    <div id="app">
        <!-- v-bind单向 -->
        <k-const :mm="msg" @gg="fn"></k-const>
        <hr>
        <!-- model双向绑定 -->
        <mc-xie v-model="rootmsg"></mc-xie>
        <p>我是子第二个子组件传过来了的数据: {{rootmsg}}</p>
    </div>   
    <script>
        Vue.component("mc-xie",{
            template:`<div>{{mm}}
                        <button @click="goto">点击</button>
                        <p>我是父组件传递传递给第二个子级的数据: {{rootmsg}}</p>
                      </div>`,

            props:['mm','rootmsg'],
            model:{ //model 选项，就是用来指定，绑定的属性和绑定的事件
                // prop: 用来告诉v-model绑定的prop是那个
                prop:"rootmsg",
                //event 绑定了那个事件 告诉 v-model触发什么事件的时候，去自动修改绑定的值
                event:"goparent"  //封装了监听和回调，以及赋值,就是说绑定后数据直接就能用
            },
            data(){
                return {
                    name:"子级2数据"
                }
            },
            methods: { 
                goto(){
                    this.$emit("goparent",this.name)
                }
            },            
        });
        let app = new Vue({
            el:"#app",
            data:{
                msg:"父级信息1",
                rootmsg:"我是父级2",
            },
            methods: {
                fn(n){
                    console.log("父级的信息")
                    console.log(n)
                }
            },
        })

    </script>

总结：