Vue去哪网学习笔记(2)

组件使用的细节点

1.

注意点1. 根据HTML5的规范，tbody里面必须跟tr，否则不能正常解析。

下图中的代码会编译错误，因为tbody后面直接跟了我们定义的模板，而不是tr标签.，那么如何解决这个小”bug”呢？
这里写图片描述

解决方案如下：

在tbody标签下面加上tr标签，同时,在tr标签里添加 is 属性来指定我们定义的组件，这样既符合了HTML5规范，又满足了我们的需求，具体做法如下，其中，row是我们自己定义的组件。
这里写图片描述
再例如在

<ul>
    <li is='组件名'></li>
    <li is='组件名'></li>
</ul>

<select>
    <option is='组件名'></option>
    <option is='组件名'></option>
</select>

注意点2：在子组件定义data的时候，data必须是一个函数，通过函数返回一个对象，而不能直接是一个对象。(因为通过函数返回对象，保证了每个组件里返回对象的独立性)

原因是子组件可能被多次调用，而每调用一次子组件都希望子组件里的数据是独立的，而不是共享的数据。
这里写图片描述

注意点3：Vue不建议我们在代码中操作dom，但是在处理一些极其复杂的动画效果时，可以通过ref这个引用来操作节点。

这里写图片描述
同理，如果是在组件上写ref这个属性，通过this.$refs.引用名.data里的对象名称来获取数据进行操作。

2. 父子组件传值的更多内容

定义全局组件：

Vue.component ('row', {
    template: '<div></div>',
    data: function() { 

    }
})

定义局部组件

var row = {
    template: '<div>aaaa</div>',
    methods: {

   }
}

1. 在父组件向子组件传值的过程中，例如

<counter :count='1'></counter>

<counter count='1'></counter>

上面这两种方式都是可以从父组件向子组件传值的，但是区别是什么呢？
带有:的说明引号后面是JavaScript的表达式，所有向子组件传递的是数组1，而不带冒号的传递的是字符串。

2. Vue中的单向数据流

当父组件传递给子组件数据的过程中，子组件不能够修改父组件传递过来的数值，只能够利用。原因是子组件是被多次利用的，一旦改变了数值，可能会导致其他引用了该子组件的也会被改变。所有Vue里提出来单向数据流的概念。
例如下面这种情况是会报错的，但是能够执行。
这里写图片描述

但是我们的需求就是改变传递过来的数值，怎么解决这个问题呢？
方法是：在自己子组件的data里定义一个数据，然后改变自己的数据就可以了。（也就是把父组件传递过来的数值克隆一个副本，然后改变这个副本就可以了。）
如下图所示：
这里写图片描述

在子组件向父组件传值的过程中，通过this.$emit(‘change’, 2, 4, 5, …)触发事件的形式，而且可以携带多个参数。

3. 组件参数校验和非props特性

组件参数校验：

把props改成对象形式，而不是数组形式了，如下图所示。
要求传递过来的content必须是Number形式，否则报错。
这里写图片描述
如果要求传递过来的数值是字符串或数字呢？可以这样写：

props: {
    content: [Number, String]
}

关于校验的更多高级用法：

require: true 要求必须有传值。
default: ‘default value’ 如果require为false，则默认值为我们自己指定的。
validator:function() { } 校验器，对我们传递的数值进行校验。
这里写图片描述

非props特性，就是父组件传递过来的数值子组件不接受，但是也不能使用，还有一点就是content = “hell”会在template模板里的那个div属性上显示。非props特性不常用。

4. 给组件绑定原生事件。

注意：在组件上添加的事件是自定义事件，不是Vue提供的事件。
如下：这个组件上的click 是自定义的事件，一定要理解清楚这里。
这里写图片描述

那么如何触发这个组件上的事件呢？
首先，在这个组件的模板上添加一个事件，然后在事件函数里通过this.$emit()往外触发一个事件，而这个事件就是组件上的事件了。

这里写图片描述

但是，上面那样做实在太麻烦，那么我能不能在我的自定义组件上添加原生事件呢？

当然可以，方法是在事件后添加一个修饰符，例如：

<child @click.native = "handleClick"></child>

这样就OK了。
如图：
这里写图片描述

5. 非父子组件之间的传值问题。

问题如下图所示：
1和2是父子关系，通过我们之前学的props属性可以传值，但是1和3，3和3之间为非父子关系，怎么传值呢？当然可以通过一层一层的传值，但是这样就略显复杂了。那么怎么解决这个问题呢？
这里写图片描述
一般来说我们有两种方式解决这种非父子组件之间传值的问题。
1. Vue提供的数据层的框架Vuex，但是Vuex使用起来比较复杂。
2. 通过总线(Bus/发布订阅模式/观察者模式)方式来解决。