组件通信
正常的组加件传值可以通过，组件属性绑定的方式，子组件通过props接收。
一级组件如果传值给二级组件的子组件，可以通过props不断的传递，还可以通过$attrs[属性]的方式传递
<my-p :content="$attrs.content"><my-p>
属性比较多的情况
<my-p v-bind="$attrs"><my-p>
父组件如果传值给子组件，传多个， 但子组件接收了其中某个，那么页面渲染会把没有被注册的属性渲染在标签上。可以通过子组件中设置 inheritAttrs,默认是true，设置为false，就不会把没有被注册的属性渲染到标签上了
inheritAttrs:false
vm.$parent
组件内部可以通过this.$parent或者再深一层可以父级组件的数据
vm.$children
可以在mouted中是用， created不能打印出来， 因为created的时候组件还没有被挂载
provide && inject
- 父组件通过provide 提供数据
provide: {
content: 'contentInfo',
title: 'titleInfo'
}
- 子组件通过inject接受注入
inject: ['content']
ref引用
<div ref="dom"></div>
在mounted中可以这样反问设置引用的这个dom ,如果设置相同的多个， 会获取最后一个
mounted() {
console.log(this.$refs.dom)
}
如果是for循环，得到的ref引用会是一个数组
<!--获取到的是最后一个-->
<div ref="dom"></div>
<div ref="dom"></div>
<!--在mounted中通过this.$refs获取到的是一个数组-->
<div ref="dom" v-for="item in 5"></div>
- 上面的用法是用在dom上
- 重点是使用在页面子组件中，
- 可以获得这个组件的实列， 从而得到这个组件的数据。
通过传递函数让子组件传参执行，父组件回调
$listeners
上面的方式是通过传递属性函数的方式，
还可以通过$listeners的方式
所有通过v-on绑定的函数都会存放在$listeners里面
<my-cmp @click="func"></my-cmp>
//子组件可以通过$listeners执行父组件的click
methods: {
handleClick() {
this.$listeners.click
}
}
$emit
可以通过$emit通知父组件执行函数，可传递参数
methods: {
handleClick() {
this.$emit('click',this.msg)
}
}
event bus事件总线
首先创建一个vue实列
Vue.prototype.bus = new Vue();
const vm = new Vue({
el:"#app"
})
- 某个组件触发事件
this.bus.$emit('click',this.inputVal)
- 其他组件监听bus的事件
this.bus.$on('click',(val)=>{
//执行
})
🚬每天分享一点点， 欢迎大家讨论， 共同学习， 有不对的地方，欢迎指出🚬
