Vue全家桶之组件化开发（父子兄弟传值例子详解）

目录

 

1.组件化开发

1.1组件

1.2 组件注册

1.2.1全局注册

1.2.2 局部组件注册

1.3 组件间数据交互

1.3.1 父组件向子组件传值

 

1.3.2 子组件向父组件传值

1.3.3 非父子组件间传值(兄弟之间传值 )

1.3.4 组件插槽

---

1.组件化开发

1.1组件

组件 (Component) 是 Vue.js 最强大的功能之一 ，组件可以扩展 HTML 元素，封装可重用的代

1.2 组件注册

1.2.1全局注册

1.Vue.component('组件名称', { }) 第1个参数是标签名称，第2个参数是一个选项对象 。全局组件注册后，任何vue实例都可以用

Vue.component(组件名称, {

    data: 组件数据,

    template: 组件模板内容

})

 

2.组件注意事项

组件参数的data值必须是函数同时这个函数要求返回一个对象（vue实例中的data值是对象）

组件模板必须是单个根元素

组件模板的内容可以是模板字符串

 

1.2.2 局部组件注册

只能在当前注册它的vue实例中使用

1.3 组件间数据交互

1.3.1 父组件向子组件传值

1. 组件内部通过 props 接收传递过来的值

 

Vue.component('menu-item', {

    props: ['title'],

    template: '

{{ title }}

'

})

 

2. 父组件通过属性将值传递给子组件

 

 

3.props属性名规则

⚫ 在props中使用驼峰形式，模板中需要使用短横线的形式

⚫ 字符串形式的模板中没有这个限制

1.3.2 子组件向父组件传值

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

 

扩大字体

 

2. 父组件监听子组件的事件

 

3. 子组件用 $emit() 触发事件， $emit() 第一个参数为 自定义的事件名称 第二个参数为需要传递的数据， 父组件用 v-on 监听子组件的事件

 

1.3.3 非父子组件间传值(兄弟之间传值 )

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

 

兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据 

 

var eventHub = new Vue()

 

2. 监听事件与销毁事件

接收数据方，通过mounted(){} 钩子中  触发hub.$on()方法名

销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据

eventHub.$on('add-todo', addTodo)

eventHub.$off('add-todo')

 

3. 触发事件

 

 传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)

 

eventHub.$emit(‘add-todo', id)

 

1.3.4 组件插槽

组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力

1.匿名插槽

插槽位置（插槽内容中无内容时，slot中可以添加内容）

Vue.component('alert-box', {

    template: `

       

            Error!

            

       

    `

})

插槽内容

Something bad happened.

 

 

 

2.具名插槽

具有名字的插槽 ，使用slot中的 "name" 属性绑定元素

 

插槽定义

 

插槽内容

标题内容

主要内容1

主要内容2

底部内容

 

 

 

3. 作用域插槽

应用场景： 父组件对子组件的内容进行加工处理， 既可以复用子组件的 slot ，又可以使 slot 内容不一致

 

插槽定义

{{item.name}}

 

插槽内容