Vue的组件如何传值(1)
Vue的组件如何传值?
父子通信的方式:
-
父向子传递数据是通过 props,
-
子向父是通过 $emit;
-
通过 $parent / $children 通信;
-
$ref,$refs 也可以访问组件实例;
父传子:
-
子组件在props中创建一个属性,用来接受父组件的传来的值,
-
在父组件注册子组件,通过属性绑定的形式,把需要传递给子组件的数据传递给子组件的内部供子组件使用。
-
然后在子组件标签中添加props属性,用以接收父组件传过来的值。
父传子简略总结:
-
父组件引入注册子组件;将父组件的自定义属性传递给子组件;<Zujian :zi_zujian="fu_zujian" />
-
子组件在props中创建一个属性,用以接收父组件传过来的值;
-
父传子显示的值 {{ users }}
父传子的介质是props,是向下传递。
子传父:
-
通过点击事件的方式,触发一个自定义事件,
-
将需要传递的值,作为$emit的值做第二个参数,该值将作为实参传递给响应自定义事件的方法,
-
在父组件当中,注册子组件,在子组件标签上监听自定义事件,并添加一个响应事件的处理方法。
子传父简略总结:
-
父组件里自定义一个方法,@ziclick="fuclick" (左子[自定义事件]右父[子传给父的值])
-
子组件this.$emit('ziclick', '子的值')
-
父组件通过fuclick(res){'接收子的值res'}
子传父的介质是自定义事件,是向上传递。$emit可以作为一个事件流来看。
兄弟组件传值:
使用一个事件处理中心 event bus,const bus = new Vue()
A 组件 通过this.$emit('约定的值msg', res)
B 组件 通过this.$on(约定的值msg',res=>{console.log(res)})
父传子 props,示例:
<body> <div id="app"> <child :fname="name1"></child> </div> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> Vue.component('child',{ template: ` <div>child子组件接收:{{fname}}</div> `, props: ['fname'] }) const vm = new Vue({ el:'#app', data() { return { name1: '父组件要传递的值☞: 張三' } } }); </script> </body>
子传父:this.$emit,子传父通过事件触发的方式。示例:
<body> <div id="app"> <child @ztof="fafun"></child> </div> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> Vue.component('child',{ // template:` // <button>子组件</button> // `, data(){ return { zmsg:'子的信息xxxx' } }, created() { this.$emit('ztof',this.zmsg) } }) const vm = new Vue({ el:'#app', data() { return { } }, methods:{ fafun(zmsg){ console.log('zmsg :>> ', zmsg); //子的信息xxxx } } }); </script> </body>
兄弟组件之间的传参 eventBus,示例:
组件1:
data(){
return {
todoList:''
}
},
methods:{
addList:function(){
//重点: $emit自定义事件
eventBus.$emit('add',this.todoList)
}
}
组件2:
created:function(){
this.acceptList()
},
methods:{
acceptList:function(){
// 重点:$on接收事件
eventBus.$on('add',(message)=>{
this.lists.push({ name:message,isFinish:false })
})
}
}