Vue组件

Vue组件

组件需要注册后才可以使用，注册分为全局注册和局部注册。

全局注册

全局注册后任何Vue实例都可以使用，子组件必须在父实例创建前注册。

Vue.component('component-name', {
	template: '
{{ message }}
',
    data: function () {
    	return {message: '组件内容'}
    }
});

component-name是组件的自定义标签名称，推荐使用小写字母加减号分割的形式命名。

Vue.component方法的第二个参数是一个对象字面量，可以包含template、data、computed、methods等选项。其中data定义组件数据，必须是函数；template选项的值必须被一个html元素包裹

局部注册

app = new Vue({
	el: '#app',
    components: {
    	'component-name': {
        	template: ''
        }
    }
});

在Vue实例中使用components选项局部注册组件，注册后的组件只在该实例作用域下有效。

组件通信

所谓通信即组件之间传递数据，组件关系可分为父子组件通信、兄弟组件通信、跨级组件通信。

父组件向子组件传递数据

组件的props选项声明从父级接受的数据，props选项既可以是字符串数组也可以是对象。

父级向子组件传递数据，可分为3步：

1. 父组件使用子组件时，在子组件标签添加数据属性
2. 子组件props选项声明从父级接受的数据
3. 在子组件中应用从父级接受的数据

props选项传入一个对象类型，对从父级接受的数据进行校验。

子组件向父组件传递数据

Vue通过自定义事件，实现子组件向父组件传递数据：

1. 子组件通过$emit(eventName, eventArgument)方法触发自定义事件
2. 父组件使用子组件时，在子组件标签使用v-on指令监听自定义事件

    
    
数值：{{ total }}

可以通过v-model替代步骤2中的v-on的事件监听

    
    
数值：{{ total }}

中央事件总线

1. 创建空的Vue实例，作为中央事件总线
2. 子组件触发事件时，指定事件发起者为中央事件总线（$emit方法的调用方是中央事件总线实例）
3. 父组件在mounted钩子函数里监听来自中央事件总线的事件

    
    
数值：{{ total }}

内容分发：slot

具名插槽

子组件模板中的标签添加name属性指定插槽名字

父组件分发的内容包裹在