Vue中父子组件的传值问题

父组件向子组件传值

在父组件中使用子组件时，添加自定义属性，属性值为传输的内容 <my-footer msg='hello-父组件给子组件的内容'></my-footer> 在子组件中，使用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 } }); }

子组件向父组件传值

在子组件中使用事件绑定触发父级的自定义事件 $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 } }); }