VUE学习笔记

Vue 第四章：

Vue父子组件传值：

父->子：通过属性传值：props[ ]

（如果属性加了冒号 : 那么双引号内就是一个js表达式。如果没加，就是一个字符串。）

（警告：avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.instead, use a data or computed property based on the prop’s value.）

单向数据流。父可以向子组件传递值，也可以修改。子组件只能用，不能修改。

Solution；

在子组件中定义一个新的数据：初始值为父亲传过来的数据。This.xxx

然后在子组件中改这个新的数据。

子->父：

通过事件。$emit 除了发送事件，还可以携带参数。

父组件监听事件@。这个事件发生时，触发的行为就可以接收到这个参数。

 

组件参数校验：

Content: {

Type: string,

Required: false,

Default: ‘xxx’

Validator: function ( value ) {

Return ( Value.length > 5) //传入内容的长度必须大于5

}

}

 

Props特性：

当父组件调用子组件的时候，子组件在props也声明了。有一个对应关系。

 

给组件绑定原生事件：

在子组件中(<child>)写事件其实都是自定义事件。

在div等元素上绑定的事件指的是绑定原生事件。

在自定义事件后加 .native ，说明绑定的不是自定义，而是原生。

 

第三层与第一层通讯。（非父子组件传值：两个组件传值，但不是父子组件。）

1. 第一层->第二层->第三层；
2. 引进工具或设计模式！（bus/总线/发布订阅模式/）

通过总线。

Vue.prototype.bus = new Vue()

代表我们每次创建vue组件，每个组件都会有bus这个属性。

子组件 @click = “handleClick”

HandleClick () {

This.bus.$emit(‘change’,this.content)// this.bus

}

 

生命周期钩子：

Mounted 被挂载时执行的函数。

Mounted () {

This.bus.$on(‘change’,function (msg) {

Alert(”msg”)

} )

}

 

This作用域发生变化：应该this_=this,用this_去引用。

 

在vue中使用插槽：

当我的子组件内容有一部分是由父组件传过来的dom进行显示的时候。

在子组件中插入想要传的内容。

父：

<child>

        <p> dell </p>

</child>

子：

<slot></slot>

 

还可以在slot中写一些默认内容。即如果不像父组件传递内容。则默认内容会显示出来。

<slot>默认内容</slot>

 

如果显示的内容一部分由子组件决定，但另一部分(多个)由外部传递：

如果有多个slot。则可以给slot命名。

 

父：

<child>

        <p slot=’header’> dell </p>

</child>

子：

<slot name=’header’></slot>

 

 

4.7

Vue的作用域插槽。

循环显示列表。

子组件做循环时，某些内容由外部传递。

父调用子组件的时候给子组件传递了一个插槽。

子：

<slot

v-for=”item of list”

       :item=item

</slot>

 

父：

<child>

<template slot-scope=”props”> //template标签是必须的。

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

</template>

</child>

 

4.8

动态组件：

<component :is=”type”> //type 为组件的名称。

</component> // vue中自带的标签。

根据:is绑定的数据的不同，来动态的绑定组件。

 

v-once：

放到内存里。性能高一点。