vue组件化开发


组件化开发思想

标准 分治 重用 组合

组件化规范 web components

组件注册

全局注册组件

Vue.component('my-component-name', { /* ... */ })

  • 组件中的data必须是一个函数
  • 组件模板内容必须是单个跟元素,不能为并列关系
  • 组件模板内容可以是模板字符串,这样代码可读性更好

组件注册命名方式有短横线和驼峰命名两种方式。如果使用驼峰命名组件,那么在使用组件时,只能在字符串模板中使用驼峰命名组件,在普通的标签模板中,必须使用短横线命名组件。

局部组件注册

在vue实例的参数重引入components属性。

局部组件只能在注册他的父组件中使用。

var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({
  components: {
    'my-component': Child
  }
})

组件间数据交互

父组件向子组件传值

  • 组件内部通过props接受传递过来的值

    Vue.component('my-component-name', { 
    	props:['title'],
      templete:'<div>{{title}}</div>'
    })
  • 父组件通过属性将值传递给子组件

    <munu-item title="来自父组件的数据"></menu-item>
    <munu-item :title="title"></menu-item>
  • props属性名规则

    • 在props中使用驼峰形式,模板中需要使用短横线形式
    • 字符串形式模板没有这个限制

子组件向父组件传值

  • 子组件通过自定义事件向父组件传递信息

<button @click=$emit("enlarge-text")>扩大字体 </button>

  • 父组件监听子组件的事件

    <munu-item @enlarge-text='fintSize += 0.1'></menu-item>

    • 子组件通过自定义事件向父组件传递信息

<button @click=$emit("enlarge-text",0.1)>扩大字体 </button>

  • 父组件监听子组件的事件

    <munu-item @enlarge-text='fintSize += $event'></menu-item>

非父子组件传值

  • 单独的事件中心管理组件间的通信

    var enentHub= new Vue()

  • 监听事件与销毁事件

    enentHub.$on('add-todo',addTodo). enentHub.$off('add-todo')

  • 触发事件. enentHub.$emit('add-todo',id )

兄弟组件传值 ==案例== :

组件插槽

匿名插槽

父组件向子组件传递内容

插槽位置

Vue.component('my-component-
  templete:'
      <div class="demo-alert-box">
      <strong>error!</strong>
      <solt></slot>
      </div>
'
})

插槽内容

<alert-box>Something</alert-box >

具名插槽

使用 中的 “name” 属性绑定元素

作用域插槽

  • 父组件对子组件的内容进行加工处理
  • 既可以复用子组件的slot,又可以使slot内容不一致

基于组件的案例


文章作者: linxueya
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 linxueya !
评论
  目录
喜迎
春节