vue 组件要点 2019年2月27日

组件的定义

组件的注册方式有两种:

  1. 全局注册,全局注册的组件可以供任何vue实例使用。

    1
    Vue.component("component-name")
  2. 局部注册,局部注册组件有两种方式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    // 1. 把组件对象赋值给一个变量,再在实例属性components上设置相应的组件名
    let componentName1 = {
    template:`<div>这是局部组件1</div>`
    }
    let app = new Vue({
    components:{
    componentName1:componentName1
    }
    })
    //-------------------------分割线-------------------------

    // 2. 在实例属性components上直接注册组件
    let componentName1 = {
    template:`<div>这是局部组件1</div>`
    }
    let app = new Vue({
    components:{
    componentName1:componentName1
    }
    })

组件的使用

组件直接以标签形式使用

注意 存在例外情况是,HTML规则限制某些标签内部只能放置指定的标签,例如 table标签内部无法直接放置组件标签(不会被浏览器解析),导致组件无法渲染。此时应使用is属性配置组件名,以达到组件挂载方式。

字符串模版不受限制。

1
2
3
<table>
<tbody is="tbody-component"></tbody>
</table>

父子组件传递数据

  1. 父->子

    使用props

动态props:父组件传入子组件的props是动态的,当其变化时,子组件接受的数据也会变化

  1. 子->父

    使用自定义事件。
    另外,自定义组件上还可以监听dom事件:

    1
    2
    <component-name @click.native="handleClick"></component-name>
    // handleClick 监听了原生dom上的click事件
  2. 父链和子组件索引

父链: 在子组件中通过this.$parent访问父组件

子组件索引: 在父组件引用子组件时添加属性ref=”com-name”指定索引名称,在父组件逻辑中通过this.$ref.com-name访问子组件;注意:$refs只在组件渲染完成后才填充,在模版中定义无效。

同级组件传递数据

使用空的vue实例作为中央数据总线:

1
2
3
4
5
vue bus = new Vue()
bus.$emit("my-event",{data:"data"}); // 发送数据
bus.$on("my-event",(data)=>{ // 接受数据,可在生命周期钩子中监听事件
// do something...
})

内容分发和solt(插槽)

在定义组件时,使用标签就类似于放置一个占位符。vue实例或父组件使用该组件时,可以在的位置放置任意内容。

父组件引用子组件时,设置插槽内容。此时插槽位置的标签的作用域是父组件。

插槽分为匿名插槽和具名插槽。

作用域插槽,可以访问子组件作用域的插槽

组件的高级用法

  1. 组件可以递归
  2. 内联模版(无法理解)
  3. 动态组件:
  4. 异步组件