-
作用域是组件本身
-
可以在模板template及计算属性computed和方法methods中使用
2.父传子，props数据
-
来自父级；可以是写死的，或者是来自父级的动态数据，这时可以使用v-bind来绑定props的值
-
可以在模板template及计算属性computed和方法methods中使用
-
如果要直接从父组件向子组件传递数字、布尔值、数组、对象，而且不使用v-bind，传递的仅仅是字符串
-
单向数据流
-
Vue 2.x 通过props传递数据是单向的, 意味着父组件数据变化时才会传递给子组件, 但是反过来不行(Vue1.x 提供了.sync修饰符来支持双向绑定)
-
之所以这样设计, 目的是尽可能将父子组件解耦，避免子组件无意中修改了父组件的状态
-
-
业务中经常会遇到两种需要改变prop的情况
-
1.父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改
-
组件中声明了数据count，它在组件初始化时会获取来自父组件的initCount，之后就与之无关了，只用维护count，这样就可以避免直接操作initCount
-
-
2.prop作为需要被转变的原始值传入
-
通过用计算属性来达到目的
-
S传递宽度要带单位(px)，但是每次都写太麻烦，而且数值计算一般是不带单位的，所以统一在组件内使用计算属性就可以了
-
-
-
注意，在JavaScript中对象和数组是引用类型，指向同一个内存空间，所以props是对象和数组时，在子组件内改变时会影响父组件的
-
数据深拷贝可以解决引用类型父子相互影响的问题
-
深拷贝就是完完整整的将一个对象从内存中拷贝一份出来。所以无论用什么办法，必然绕不开开辟一块新的内存空间。
-
-
数据验证
-
props选项可以是一个数组，但是当需要对prop进行验证时，就需要对象写法
-
当你的组件需要提供给别人使用时，推荐都进行数据验证
-
3.子传父，子组件用$emit触发事件，父组件用$on来监听该事件
-
原理 dispatchEvent 与 addEventListener；观察者模式常用到的方法
-
用事件抛出一个特定的值: $emit的第二个参数，父组件监听这个事件时，我们可以通过$event访问到被抛出的这个值(或者这个值将会作为事件处理函数的第一个参数传入)
-
使用v-model可以用来创建自定义的表单输入组件
4.Vue.js 1.x 版本 $dispatch()，向上级派发事件；父级(一级或多级)都可以在Vue实例的events选项内接收
var myComChild = { template: '<div><button @click="clickHandler">click</button></div>', data () { return { } }, methods: { clickHandler () { this.$dispatch('d-event', 'hello'); } } }; var myCom = { template: '<div><my-com-child></my-com-child></div>', data () { return { } }, created () { this.$on('d-event', (data) => { // do something console.log('1' + data); // 第一次接收到后停止冒泡 return true; // 返回true可以继续冒泡, 使得更高一级的父组件也能接收到该事件 }); }, components: { myComChild, } }; var vm = new Vue({ el: '#app', data () { return { } }, created () { this.$on('d-event', (data) => { // do something console.log('2' + data); }); }, components: { myCom, }, methods: { }, // events: { // 'd-event': function(msg) { // console.log(msg); // } // } });
5.Vue.js 1.x版本$broadcast()，由上级向下级广播事件；用法与$dispatch()一致，只是方向相反
6.使用一个空的Vue实例作为中央事件总线(bus) - 中介者模式
-
由于Vue.js 1.x版本中的$dispatch() 与 $broadcast() ，基于组件树结构的事件流方式，让人难以理解，并且在组件结构扩展的过程中会变得越来越脆弱，并且不能解决兄弟组件通信的问题
-
通过bus把组件的事件发布出去, 同时其他组件会接收到来自bus的事件，进而在相应的事件回调中完成自己的业务逻辑
-
这种方法巧妙而轻量地实现了任何组件间的通信, 包括父子、兄弟、跨级，而且Vue 1.x 和 Vue 2.x都适用
-
如果深入适用，可以扩展bus实例，给它添加data、method、computed等选项，这些都是可以公用的
-
在业务中，尤其是协同开发时非常有用，因为经常需要共享一些通用的信息，比如用户登录的昵称、性别、邮箱等，还有用户的授权token等
-
只需在初始化时让bus获取一次，任何时间、任何组件就可以从中直接使用了，在单页面富应用(SPA)中会很实用
// eventHub, 注册在组件树的根 Vue 实例中, 通过 this.$root.eventHub.$emit 与 this.$root.eventHub.$on来使用 // 非组件中的事件总线bus使用方式 var bus = new Vue(); var comA = { template: '<button @click="clickHandler">传递事件到中央事件总线</button>', methods: { clickHandler () { bus.$emit('bus-event', '来自组件comA'); } } }; new Vue({ el: '#app', data () { return { message: '' } }, components: { comA, }, mounted () { var _this = this; bus.$on('bus-event', function (msg) { console.log(msg); _this.message = msg; }) } });
-
7.父链 this.$parent
-
在子组件中，使用this.$parent可以直接访问该组件的父实例或组件, 父组件也可以通过this.$children访问它所有的子组件，而且可以递归向上或向下无限访问，直到根实例或最内层的组件
-
尽管Vue允许这样的操作, 但在业务中，子组件应该尽可能地避免依赖父组件的数据(自己复制一个)，更不应该去主动修改它的数据，因为这样使得父子组件紧耦合，只看父组件很难理解父组件的状态，因为它可能被任意组件修改，
-
理想情况下，只有组件自己能修改它的状态
-
父子组件最好还是通过props和$emit来通信
var comA = { template: '<div><button @click="clickHandler">点击修改父元素数据</button></div>', methods: { clickHandler () { // do something // 访问到父链后, 可以做任何操作, 比如直接修改父组件数据 this.$parent.message = '来自组件com-a的内容'; }, } }; new Vue({ el: '#app', data () { return { message: '' } }, components: { comA, } });
8.子组件索引
-
$ref只在组件渲染完成后才填充，并且它是非响应式的，它仅仅作为一个直接访问子组件的应急方案，应当避免在模板或计算属性中使用$refs(非响应式的)
<div id="app"> <button @click="clickHandler">通过ref获取子组件实例</button> <p ref="p">hello</p> <com-a ref="comA"></com-a> </div> <script src="vue-dev.js"></script> <script> // 子组件索引 // 当子组件较多时, 通过this.$children来一一遍历出我们需要的一个组件实例是件困难的事 // 尤其是组件动态渲染时, 它们的序列是不固定的 // Vue提供了子组件索引的方法, 用特殊的属性ref来为子组件指定一个索引名称 var comA = { data () { return { message: '子组件的数据' } }, template: '<div><span>this is child component</span></div>', }; new Vue({ el: '#app', data () { return { } }, components: { comA, }, methods: { clickHandler () { // 通过$refs来访问指定的实例 var msg = this.$refs.comA.message; console.log(msg); // 与Vue 1.x不同的是, Vue 2.x 将v-el和v-ref合并为了 ref，Vue会去自动判断是普通标签还是组件 console.log(this.$refs.comA); // VueComponent 对象 console.log(this.$refs.p); // dom 元素 p元素 } } }) </script>
9.slot
-
在子组件内使用特殊的
<slot>元素就可以为这个子组件开启一个slot(插槽)，在父组件模板里，插入在子组件标签内的所有内容将替代子组件的<slot>标签及它的内容(如果父组件没有插入内容，子组件<slot>标签里的内容将作为默认出现 -
单个slot
-
具名slot；父组件中使用slot特性，匹配子组件中使用了name特性的<slot>；父组件中没有使用slot特性的元素与内容将出现在子组件中没有使用name特性的默认slot中
<div id="app"> <my-com> <h2 slot="header">标题</h2> <p>正文内容</p> <div slot="footer">底部信息</div> </my-com> </div> <!-- <script src="libs/vue-v1.0.28/vue.js"></script> --> <script src="libs/vue-dev.js"></script> <script> var myCom = { template: ' <div> <slot name="header"></slot> <slot></slot> <slot name="footer"></slot> </div>', }; new Vue({ el: '#app', data () { return { } }, components: { myCom, }, }); </script>
10.作用域插槽
-
作用域插槽是一种特殊的slot，使用一个可以复用的模板替换已渲染的元素
-
父组件使用了
<template>元素，而且拥有一个scope="props"的特性，这里的props只是一个临时变量，就像v-for="item in items"里面的item一样。template可以通过临时变量props来访问来自子组件插槽的数据 -
作用域插槽的使用场景就是既可以复用子组件的slot，又可以使slot内容不一致
<div id="app"> <my-com> <template scope="props"> <p>来自父组件的内容</p> <p>{{ props.msg }}</p> </template> </my-com> </div> <script src="libs/vue-dev.js"></script> <script> var myCom = { template: '<div class="container"> <slot msg="来自子组件的内容"></slot> </div>' }; new Vue({ el: '#app', data () { return { } }, components: { myCom, } }) </script>