前言
vue父子组件之间相互传递数据应该是我们开发中最常见的场景。今天刚好有时间就写两个简单的小例子记录一下。
一、父组件向子组件传递数据
父组件向子组件传递数据相对简单,主要是通过props作为中间桥梁,下面是代码:
<div id="app">
<input v-model="msg">
<child :message="msg"></child>
<child1 v-for="item in arr" :text="item"></child1>
</div>
Vue.component('child',{
props:['message'],
template:'<p>{{message}}</p>'
})
Vue.component('child1',{
props:['text'],
template:'<li>{{text}}</li>'
})
new Vue({
el:'#app',
data(){
return {
msg:'zhang',
arr:['js','css','html']
}
}
})
运行结果:
二、子组件向父组件传递数据
子组件向父组件传递数据也并不麻烦,首先在子组件和父组件中各声明一个方法,然后在子组件方法中通过$emit函数触发父组件方法就可以实现了。下面这个例子是把在子组件input输入框输入的内容添加到父组件的一个集合中。
<div id="app">
<p v-for="item in arr">{{item}}</p>
<m-component @handle="add"></m-component>
</div>
Vue.component('mComponent',{
template:'<div>' +
'<input v-model="msg">' +
'<button @click="receive">send</button>'+
'</div>',
data(){
return{
msg:'zhang'
}
},
methods:{
receive(){
this.$emit('handle',this.msg);
}
}
})
new Vue({
el:'#app',
data(){
return {
arr:[]
}
},
methods:{
add(arg){
this.arr.push(arg);
}
}
})
值得注意的是:$emit的第一个参数,那是我们自己定义的,在html中通过@参数名=父组件中的方法。
运行效果:
好啦,是不是感觉很简单,相信聪明的你一看就明白了。