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 父组件向子组件传值