Vue中父子组件的传值问题

父组件向子组件传值

1. 在父组件中使用子组件时，添加自定义属性，属性值为传输的内容

<my-footer msg='hello-父组件给子组件的内容'></my-footer>

2. 在子组件中，使用props:[]接受父组件中传递的属性
   props:[“msg”]
   多个属性使用逗号分隔
   props声明在和date同级位置

html代码：

 <div id="app">    
       <my-header></my-header>
 </div> 

js代码：

Vue.component("my-footer",{
        //子组件
        data(){
            return {
                substr:"my-footer"
            }
        },
        props:["msg","str",'num'],//子组件希望从父组件中接受的属性
        template:`
            <div>
                {{msg}}--{{str}}--{{num}}  //hello-父组件给子组件的内容--my-header--0
            </div>
        `
    });

    var header={//父组件
        data(){
            return {
                num:0,
                substr:''
            }
        },
        template:`
        <div>            
            <my-footer v-on:accept='accept' msg='hello-父组件给子组件的内容' str='my-header' :num='num'></my-footer>
        </div>`
    }
    new Vue({
        el:'#app',
        data:{},
        methods:{},
        components:{
            'my-header':header
        }
    });
}

子组件向父组件传值

1. 在子组件中使用事件绑定触发父级的自定义事件

$emit("name",data,data1); 

2.在父组件中绑定自定义事件
在自定义事件的事件处理程序中，参数为传递的变量

html代码：
<div id="app">
       <my-header></my-header>
</div> 
js代码：

  Vue.component("my-footer",{
        //子组件
        data(){
            return {
                substr:"my-footer"
            }
        },
        methods:{
            send(){
                this.$emit("accept",this.substr,"send");//子组件给父组件传递的值
            }
        },
        template:`
            <div>
                <p @click='send'>click-send</p>
            </div>
        `
    });

    var header={//父组件
        data(){
            return {
                num:0,
                substr:''
            }
        },
            accept(data,data1){
                this.substr=data;
                console.log(data,data1); //my-footer，send
            }
        },
        template:`
        <div>            
            <my-footer v-on:accept='accept' ></my-footer>
        </div>`
    }
    new Vue({
        el:'#app',
        data:{},
        methods:{},
        components:{
            'my-header':header
        }
    });
}