自定义事件
父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！
使用 v-on 绑定自定义事件
每个 Vue 实例都实现了事件接口 (Events interface)，即：
- 使用 $on(eventName) 监听事件
- 使用 $emit(eventName) 触发事件
{{ total }}
运行结果：
运行过程：
点击【按钮】，触发increment22方法，this.$emit('increment') 然后调用起Vue中的 incrementTotal方法。
button-counter-------increment
example-------increment
给组件绑定原生事件
有时候，你可能想在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on。
运行结果：
点击按钮，弹出提示框 'root 1111'
.sync 修饰符
.sync 修饰符只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 侦听器。
会被扩展为：
当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：
this.$emit('update:foo', newValue)
实例：
运行结果：输入框里面值改变，bar的值也会跟着相应的修改。
使用自定义事件的表单输入组件
自定义事件可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。
它相当于下面的简写：
实例：
Total: ${{ total }}
非父子组件通信
有时候两个组件也需要通信 (非父子关系)。在简单的场景下，可以使用一个空的 Vue 实例作为中央事件总线：
var bus = new Vue()
// 在组件 B 创建的钩子中监听事件
bus.$on('msg-to-a', msg => this.message = msg );
// 触发组件 A 中的事件
bus.$emit('msg-to-a',event.target.value);
实例：
{{message}}
运行结果：输入框输入什么内容，下面就会显示相同的内容
使用 Slot 分发内容
在使用组件时，我们常常要像这样组合它们：
为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为 内容分发 (或 “transclusion” 如果你熟悉 Angular)。
编译作用域
在深入内容分发 API 之前，我们先明确内容在哪个作用域里编译。假定模板为：
{{ message }}
message 应该绑定到父组件的数据，还是绑定到子组件的数据？答案是父组件。组件作用域简单地说是：
父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译.
message: {{message}}
运行结果：
我是子组件的标题
只有在没有要分发的内容时才会显示。
如果子模版里面包含内容，那结果会怎么样？
我在这，你在哪
运行结果：
我是子组件的标题
我在这，你在哪
具名 Slot
这里可能是一个页面标题
主要内容的一个段落。
另一个主要段落。
这里有一些联系信息
运行结果：
这里可能是一个页面标题
主要内容的一个段落。
另一个主要段落。
作用域插槽
作用域插槽是一种特殊类型的插槽，用作使用一个 (能够传递数据到) 可重用模板替换已渲染元素。
hello from parent
{{ props.text }}
运行结果：
hello from parent
hello from child
动态组件
通过使用保留的
运行结果：
Welcome home!
如果在谷歌浏览器控制台输入
vm10.currentView = Home2
运行结果变为：
Welcome home2!
keep-alive
运行结果：
第一次页面加载时，会打印 fetch data home11 ，切换到home22，会打印 fetch data home22， 再切换到home11，就不会打印 fetch data home11。
| 扫码申请加入全栈部落 |
|---|
|