vue学习笔记2

1,非父子组件间的传值

1,非父子组件之间的传值有两种方法.方法一:用vuex比较难.方法二:利用bus(总线/观察者模式/发布订阅模式)

2,bus的使用.

首先vue.prototype.bus= new vue(),意思是给vue的原型对象添加bus属性,且bus是vue的实例

其次就是如何触发传值:this.bus.$emit(事件名,携带的参数 )$emit()方法

最后就在组件中利用钩子函数mounted:function(){}监听事件,:this.bus.$on(事件名称,function(){}(监听到事件后要执行的函数))

2,vue中的插槽

1vue中插槽的作用:插槽用于父组件 向子组件传递dom结构.

<child>

<div></div>

</child>即在使用自组建的时候在标签内直接插入dom结构 在子组件中使用<slot></slot>就能实现在子组件中插槽.

2,<slot></slot>标签内可以先填写内容作为没有插槽传递时的默认值.

3,据名插槽,当插槽没有名字时slot标签代表所有插入的内容

<child>

<div>插槽一</div>

<div>插槽二</div>

</child>再子组件使用slot标签的时候两个div都会显示.

据名插槽作用:可以使slot标签具体使用不同插槽内容

使用:

在父组件中

<child>

<div slot='one'>插槽一</div>

<div  slot='two'>插槽二</div>

</child>

在子组件中

<slot name='one'></slot>

<slot name='two'></slot>

4,据名插槽也可以有默认值当父组件没有传递插槽时显示默认值

插槽只有一个据名插槽可以有多个.

3,vue中的作用域插槽

1,作用域插槽的使用场景:子组件循环数组但是显示的dom结构由父组件决定,此时就需要父组件给子组件传递一个显示的dom结构

2,使用方式在使用子组件的时候在子组件内插入带有tamplet标签的dom模板

例:

<child>

<tamplet slot-scope='props'> props内存储子组件传递的数据

<div>{{props.item}}</div>

</tamplate>

</child>

在子组件中使用

<slot v-for="item of list" :item=item>使用作用域插槽子组件可以向父组件的插槽传数据,父组件通过slot-scope来接受传递的数据存储在slot-scope的变量

</slot>

4,vue中动态组件和v-once

1