Vue - 组件

基础

---

注册组件

组件可以在全局注册，也可以在局部注册，全局注册的组件所有子组件都可以使用


// 全局注册组件
Vue.component("component-name", {
　　// options 和跟实例的options参数一样，除了 el
　　data(){
　　　　return { xxx };
　　}
})

组件的 data 参数必须是一个函数( 防止 data 对象被多个相同组件共享 )

 

props

prop 是自定义到组件上的一些属性，组件传入的 prop 会成为该实例的一个属性

 

通过事件向父组件发消息

使用 $emit 触发父组件的事件

<sub v-on:someEvent="doSomething"></sub>
// sub 组件某个方法
this.$emit( "someEvent" , arg)

 
只可以向上传递一个参数，而且必须用 $event 变量名接收

 

插槽

插槽可以将自定义组件中的内容渲染在组件中( React的children )

 

动态组件

通过 Vue 的 component 元素和 is 属性实现


// currentComponent 可以是一个组件的选项对象，或者是一个已经注册的组件的名字
<component is="currentComponent"></component>