Vue的组件（2）

目录

自定义事件的监听和触发

内容分发

1、基础用法：

 2、后备内容：

3、具名插槽：

4、作用域插槽

混入

1、基础用法：

 2、选项合并：

3、全局混入

动态组件

1、基础用法：

 2、keep-alive

---

父组件通过使用prop为子组件传递数据，但如果子组件要把数据传递回去，就需要自定义事件来实现。

自定义事件的监听和触发

父组件可以像处理DOM事件一样通过v-on监听子组件实例的自定义事件，而子组件可以通过调用内建的$emit() 方法并传入事件名称来触发自定义事件。$emit()方法的语法格式如下：

$emit(eventName,[...args])

参数说明：eventName：传入事件的名称；[...args]：触发事件传递的参数，该参数是可选的

在页面中定义一个按钮和一行文本，实现文本放大的功能示例：

将原生事件绑定到组件,如果想在某个组件的根元素上监听一个原生事件，可以用v-on的.native修饰符:

---

内容分发

在实际开发中，子组件往往只提供基本的交互功能，而内容是由父组件提供。为此Vue.js提供了一种混合父组件内容和子组件模板的方式，这种方式称为内容分发。

1、基础用法：

      Vue.js参照当前Web Components模范草案实现了一套内容分发的API，使用元素作为原始内容的插槽。

    {{message}}

         

 2、后备内容：

        有时候需要为一个插槽设置具体的后备，也就是默认的内容，该内容只会在没有提供内容的时候被渲染。实例如下：

3、具名插槽：

        有时候需要在组件模板中使用多个插槽，这种情况需要用到元素的name属性，通过这个属性定义的插槽称为具名插槽。在向具名插槽提供内容时，可以在一个