1 组件通信
1.1 组件通信介绍
-
介绍: 组件之间,需要相互传递数据
-
作用: 传递数据,很多时候需要看懂别人封装的组件,或自己封装组件。
1.2 组件通信的三种方式
-
父传子
: 父组件传递给子组件// 父组件 <template> <div class="father"> <h1>父传子</h1> <Son :money="money" desc="儿子,爸爸给你100块" :属性名="属性值" /> </div> </template> // 子组件 export default { props: ['money', 'desc', '属性名'], props: { // 注意: 如果不满足这些条件,会警告,但是仍然正常显示。 money:{ type: 类型, // String Number Boolean Object Array required: 是否必填 // true false default: 默认值 // 基本类型直接写 如果是对象或数组 写一个函数 再返回默认值 }, desc: {}, 属性名: {} } }
-
子传父
: 子组件传递给父组件// 父组件 <template> <子组件的标签 @自定义事件名="处理函数"></子组件的标签> </template> export default { methods: { 处理函数(data) { // data就是子组件传递过来的数据 } } } // 子组件 this.$emit('自定义事件名', 数据)
-
乱传
:【中央事件总线bus】 任意两个组件,可以自由传递-
在main.js中,定义一个空的vue实例,当成中介 【1】
Vue.prototype.$bus = new Vue()
-
A组件传递出去
this.$bus.$emit('自定义事件名', 数据)
-
B组件接收
this.$bus.$on('自定义事件名', (data) => { // data就是接收到的数据 })
注意: bus传递数据,两个组件需要时 同时存在,同时渲染的状态
-
2 插槽
-
作用: 子组件预留 ==
插槽
==, 将来使用组件的时候,可以把==内容==插入插槽的位置。 -
分类:
-
匿名插槽
-
具名插槽
-
作用域插槽
// 父组件 <Son2> <p slot="header">我是内容 header header</p> <p slot="main">我是内容 main main</p> <p slot="footer" slot-scope="scope">{{scope}}我是内容 footer footer</p> </Son2> // 子组件 <div class="son2"> <h2>子组件3</h2> <header> <!-- 匿名插槽 --> <!-- <slot></slot> --> <!-- 具名插槽 --> <slot name="header"></slot> </header> <main> <!-- <slot></slot> --> <!-- 具名插槽 --> <slot name="main"></slot> </main> <footer> <!-- 作用域插槽 --> <slot :content="content" :msg="msg" name="footer"></slot> </footer> </div>
-
-
指令:
v-slot
【vue 2.6.x 推出的,取代插槽的以前的写法】
// 子组件写法不变 只是改不了父组件的写法 <Son2> <template v-slot:header> <p>我是内容 header header</p> </template> <template #main> <p>我是内容 main main</p> </template> <template #footer="scope"> <p>{{scope}}我是内容 footer footer</p> </template> </Son2>