目录
父传子
props
provide和inject
必须是两个存在关系的组件,不能在两个毫无关系的两个组件中传值,只能跨层级传值。
相关文章链接: 文章.
$attrs
例:
父组件中
子组件中,如果没有在props中接收,那么就会在this.$attrs中,如果接收了的话就不会在this. $attrs
中,如下图所示
$listeners(传的是一个方法,可直接改变父组件中的值)
可以在子组件中自定义事件,在子组件没有分发事件的前提下,如下图所示
父组件中:
子组件中:
原理:调用this. $listeners.send传进去一个值,会传到父组件中send方法中,然后进行改变数据的操作
.sync(可直接改变父组件中的值)
需要在子组件中通过this. $emit分发事件方式第一个参数为事件名字,必须叫‘update:要修改的属性名’,第二个参数为修改的值
$parent(可直接改变父组件中的值)
子组件:
click(){
this.$parent.name='改变之后的值' //parent后面跟传的值
}
子传父
1.ref(可直接修改子组件值)
<child ref="child ></child>
click(){
console.log(this.$refs.child)
}
2.this.$children (得到的为数组)(可直接修改子组件值)
3.$emit(分发事件形式)
4.通过插槽方式传给父组件
知识1 -----不给名字不给属性为匿名插槽,可以在父组件中直接写内容(不用template情况下),当插槽没有名字时候,在父组件中用的时候名字默认为default(使用template情况下)
知识2 ----插槽不会在页面上生成实际的标签,需要在slot中使用标签包起来
知识3 ----如果想获得作用域插槽this.$scopedSlots.red() >>>用于封装组件
子组件中:(以作用于插槽为例)
父组件中:
$bus(两个组件中传值)
原理:利用创建一个空的Vue实例
在src文件下建立一个bus文件,然后在其下面创建一个index.js,index.js内容如下
import Vue from 'vue'
const bus = new Vue()
Vue.prototype.$bus=bus
然后在main.js中
import './bus'
使用(传):
click(){
this.$bus.$emit('send',this.name) //第一个为事件名,第二个参数为要传的数据
}
使用(接收):
this.$bus.$on('send',data=>{
console.log(data)
})