vue组件通信
vue组件通信
一、props
- 适用场景:父子组件通讯
1、父组件,给子组件【ChildA】传递数据
<child-a :msg="msg"></child-a>
2、子组件,props接收数据
//props有两种写法
//1、数组形式
props:['msg']
//2、对象形式
props:{
msg:{
type:String,
default:''
}
},
props: {
goods: {
type: Array,
default(){ //default可以函数
return []
}
}
}
-
注:prop 只读,不可被修改,所有修改都会失效并警告。
二、$emit
- 适用场景:子组件给父组件传递数据
1、子组件【ChildA】$emit发射事件goodsClick
,传递数据item
//告诉父组件点击了那个商品
this.$emit('goodsClick',item);
2、父组件监听子组件【ChildA】发射的goodsClick
事件,用handleGoods进行处理
<ChildA :goods="goodsList" @goodsClick="handleGoods"/>
handleGoods(item) {
//操作子组件传过来的数据
},
自定义事件,需要$emit()
、$on()
-
$emit('自定义事件名',要传送的数据)
--发送事件 -
$on('事件名',callback)
--监听事件 -
有点蠢的注释:在不同组件中
this.$emit()
,和this.$on()
,this的组件实例对象是不一样的。所以不能this.$on()
监听不到this.$emit
发射的事件。同组件中可以。---->(事件源要相同)
三、全局事件总线$bus
- 适用场景:万能,缺点不方便维护
1、在mian.js 中配置全局事件总线,挂载到Vue原型上
new Vue({
render: h => h(App),
beforeCreate(){
Vue.prototype.$bus=this;//this=>VM
},
}).$mount('#app')
//其实就是: Vue.prototype.$bus=new Vue();
2、发送事件
this.$bus.$emit('自定义事件名',要传送的数据)
;
//通知兄弟组件,当前索引值是为几..送出事件
this.$bus.$emit('getIndex', this.currenyIndex);
3、监听事件
this.$bus.$on('事件名',callback)
;
//组件在什么周期挂载的时候,监听这个组件
mounted() {
//通过全局事件总线,获取兄弟组件传递过来的索引值
this.$bus.$on('getIndex', (index) => {
//修改当前响应式数据
this.currentIndex = index
})
},
4、移除事件监听者
this.$bus.$off('addClick');
四、Vuex
- 适用场景:万能
[vuex]
五、插槽
- 适用场景:父子组件通信(一般结构)
- 默认插槽、具名插槽、作用域插槽
[插槽]
六、pubsub.js 发布订阅
- 适用场景:万能
七、$attrs
/$listener
- 都是组件实例自身的属性
$attrs
:可以获取到父组件传递过来的props数据。- 如果子组件已经通过props接收的属性,在
$attrs
属性当中是获取不到的。
- 如果子组件已经通过props接收的属性,在
$listeners
:它可以获取到父组件给子组件传递的自定义事件。
<!--父组件-->
<div>
<h1>二次封装element自定义按钮</h1>
<EleBtn type="success" icon="el-icon-delete" size="minni" title="删除按钮" txt="删除" @click="handler"/>
</div>
<!--子组件-->
<div>
<a :title="title">
<!-- 不能使用语法糖 -->
<el-button v-bind="$attrs" v-on="$listeners">{{txt}}</el-button>
</a>
</div>
//子组件可打印查看值
mounted() {
console.log(this.$attrs);//{type: 'success', icon: 'el-icon-delete', size: 'minni'}
console.log(this.$listeners);//{click: ƒ}
}
八、$children
/$refs
this.$children
- 组件实例的属性,可以获取到当前组件的全部子组件【数组】。一般不通过这样拿。
console.log(this.$children);//返回所有的子组件对象的集合
console.log(this.$children[0]);
console.log(this.$children[0].money);
this.$children.forEach(item=>{
item.money-=200;
})
- 可以获取到真实的DOM节点,也可以获取到某一个子组件标签,操作子组件的数据和方法,
- 组件对象类型,默认是个空的对象。常用。
- 要在组件上加 ref="名字"。
<childA ref="childA"/>
console.log(this.$refs.childA);//获取属性值为ref="childA"的组件对象
console.log(this.$refs.childA.money);
九、$parent
/$root
this.$parent
- 组件实例的属性,可以获取到当前子组件的父组件,进而可以操作父组件的数据与方法。
- 不建议使用,一个子组件可以被多个组件调用。一个父组件里有name这个属性,另一个父组件中可能没有。
console.log(this.$parent);
console.log(this.$parent.name);
this.$root
- 访问根组件,也很少用。
- vue实例里面东西很少,基本什么东西都没有
console.log(this.$root);
console.log(this.$root.name);//?手脚架中,App.vue根组件中定义了name,但是访问不到。
作者:黄哈哈。
原文链接:https://www.cnblogs.com/jiajia-hjj/p/15375687.html
本博客大多为学习笔记或读书笔记,本文如对您有帮助,还请多推荐下此文,如有错误欢迎指正。