第四章、深入理解vue组件

4-1.使用组件的细节

a.使用is解决html出现bug

如下 table下面应该为tr，所以页面渲染的时候没有找到tr是有问题的，所以是有小bug，所以table中必须是tr

 

 

 

b.改上面bug，table中必须是tr，这是h5的编码规范。加上is后的意思tr是row的意思，符合h5的代码规范。所以，ul下面<li is="row"></li>还有select下<option is="row"></option>

 

c.

 

d. ref的应用，用在div这样的标签上，获取的是div块的dom。ref应用在组件上的时候，获取的是组件的引用。

《1》this.$refs.hello获取的是当前组件对应的dom的元素节点，这是在div的标签上的情况，如果是组件呢？看《2》

 

 

 

 

 

 《2》ref应用在组件上，获取的是组件的引用，也就是组件的实例。可以应用其中的属性，比如this.$refs.one.number，number为one所在组件的实例属性。

 

 

 

 

 

 

 

 

 

完整代码如下：

 

 

 

 

4-2、父子组件间的数据传递

a.

 

 

 

b.以下会报错(原因：子组件不能更改父组件穿过来的参数)，单项数据流（父组件通过属性向子组件传递数据）

改对的

 

 

c.完整的父子组件传值

 

 

 

4-3、组件参数校验与非props特性

a.父组件传参到子组件，不带着冒号：传的是字符串，带着冒号：传的是数字

 

b.子组件接收的参数，要么是数字要么是字符串。

 

c. required:true/false，为属性是必传或者不必传。default为默认值，当获取不到属性值得时候，用默认值

 

d.字符串的长度，函数中的value为传入的父组件属性值，长度必须大于5，

 

e.props特性 是父组件传值给子组件，子组件props接收子属性。dom中父组件没有此属性。

非props特性是父组件传值给子组件，子组件不接收子属性。dom中父组件有此属性。

 

4-4、给组件绑定原生事件

a.直接绑定自定义事件，页面不触发事件

组件中绑定的事件为“自定义事件”，如果要触发自定义事件，必须通过子组件事件向外触发自定义事件。

 

 

 

b.在元素上绑定的原生事件是可以触发的

 

c.对的代码

 

 

 

d.就想在父组件用.native监听“原生事件”

 

 

4-5.非父子组件传值（Bus/总线/发布订阅模式/观察者模式）

 a.点击dell全部变成dell，点击Lee全部变成Lee，第一步如下

b.

 

 

 

4-6.在Vue中使用插槽

a.想在子组件中放入父组件传递过来的一些内容

 

 

 

 

b.用v-html显示父传的属性

 

 

 

 c.slot插槽---父传子（优雅传DOM结构）

 （1）

 

把插槽中的p改成h1

 

（2）slot中可以定义默认值

 

 

（3）具名插槽

 

 

 

 

 （d）具名插槽默认值

 

4-7、作用域插槽

a.常规

 

 

 

b.作用域插槽：当子组件做循环或者某一部分的dom结构由外部传入的时候，用作用域插槽。

子组件向父组件插槽传数据，父组件接收数据必须用template，并用slot-scope接收子组件传过来的值

 

 c.若将如上li改成h1

 

 

4-8、动态组件与v-once指令

（a）常规写法

b.动态组件写法

vue中自带component（动态组件）标签，这个组件中有：is属性

 

 

 

c.v-once指令使用

如果用a方法则每次change的时候都是创建显示块，消除将要消失的块。所以不利于性能。用v-once后，可以缓存这两个块，快速提高静态内容的展示效率。