Vue:非父子组件间的传值;Vue中使用插槽;作用域插槽;动态组件与v-once

==== 非父子组件间的传值 ====

Vue:非父子组件间的传值;Vue中使用插槽;作用域插槽;动态组件与v-once_第1张图片

非父子组件间的传值方式:1.Vuex  2.bus,发布订阅模式(总线机制)

Bus/总线机制发布订阅模式/观察者模式:

1、Vue.prototype.bus = new Vue();给Vue这个类上挂了一个bus属性,通过这个类创建的实例上都会有bus这个属性,它都指向同一个vue的实例。

2、在子组件的template里绑定一个事件(如handle),在子组件的methods里定义这个事件(如handle),通过this.bus.$emit('事件名',参数)【this.bus指的是这个实例上挂载的bus,这个bus又是vue的实例,所以它上面就会有$emit这个方法,所以就可以向外触发事件同时也可以携带数据】就可以向外传递数据,

3、在子组件的生命周期函数mounted里对bus触发的事件进行监听(因为bus是vue实例,所以它就有$on方法,可以监听事件),this.bus.$on('事件',回调函数)

个人对bus的理解是:(详情可看小练习)

(1)在Vue原型对象上挂载一个bus属性,后面实例化出来的每个vue实例都有这个bus属性

(2)在一个子组件上,通过bus属性向外触发某个事件(比如事件名是change),并传递数据

(3)在需要接受数据的子组件上,通过bus属性监听change事件,然后获取传递过来的数据

Vue:非父子组件间的传值;Vue中使用插槽;作用域插槽;动态组件与v-once_第2张图片


=== 在Vue中使用插槽 ====

1、在子组件的template里可以直接使用slot标签,它可以显示父组件向子组件插入的内容。

2、slot标签里面可以写一些默认值,当父组件没有插入内容的时候它就会显示默认值,插入内容时就只显示插入的内容。

Vue:非父子组件间的传值;Vue中使用插槽;作用域插槽;动态组件与v-once_第3张图片

3、当使用多个slot标签时,直接插入多个内容时,每个slot标签内都会包括所有插入的内容。

可以通过slot属性给插入的不同内容设置指定的名字,然后给相应的slot标签设置相应的name属性值,就可以让该slot标签显示指定的插入内容。

Vue:非父子组件间的传值;Vue中使用插槽;作用域插槽;动态组件与v-once_第4张图片

插槽理解总结:

(1)插槽是统称,模板中的三个slot标签都是插槽。

(2)但是多个插槽需要区分,会分别设置一个name属性。这个就叫做“具名插槽”,需要使用name属性命名。

(3)一般只有一个插槽的时候,不需要具名哦,多个才需要name来区分。




==== 作用域插槽 ====

1、如果该组件可能给多个地方使用 则不写明它是什么标签,而是由调用的地方来决定 模板使用slot标签 然后把遍历的item传过去

2、使用作用域插槽时,子组件可以向父组件的插槽里面传数据,父组件传递过来的插槽如果想接收这个数据,必须在外层使用一个template,同时通过slot-scope对应的属性名来接收传递过来的数据。

3、应该使用作用域插槽的情况:当子组件要做循环或者它的某一部分应该由外部传递进来的时候。

Vue:非父子组件间的传值;Vue中使用插槽;作用域插槽;动态组件与v-once_第5张图片



==== 动态组件与v-once ====

1、component是自带的动态组件,它有一个is属性,is属性里的数据是谁就会显示为哪个组件。

2、v-once:内部的内容只渲染一次,即使里面的数据发生了改变也不会重新进行渲染。

Vue:非父子组件间的传值;Vue中使用插槽;作用域插槽;动态组件与v-once_第6张图片

你可能感兴趣的:(Vue:非父子组件间的传值;Vue中使用插槽;作用域插槽;动态组件与v-once)