之前学习了组件通信的6中方式
1-props：使用场景：【父组件给子组件传递数据】
传递数据类型：
可能是函数：实质是子组件想给父组件传递数据；
可能不是函数：实质就是父组件给子组件传递数据
特殊情况：路由传递props
1:布尔值类型，把路由中params参数映射为组件props数据
2:对象，静态数据，很少用
3:函数，可以把路由中params|query参数映射为组件props数据
2-自定义事件 $emit $on
事件:原生DOM事件----【click|mouseenter........】
事件：自定义事件-----【子组件给父组件传递数据】
3-$bus 全局事件总线
组件实例的原型的原型指向的Vue.prototype
4-pubsub-js【发布订阅消息】
*在vue中根本不用【React】 ----万能
5-Vuex[仓库] -----数据非持久化
state mutations actions getters modules
6-插槽-----父子通信【结构】
默认插槽
具名插槽
作用域插槽:子组件的数据来源于父组件，但是子组件的自己的结构有父亲决定。
1-event事件深入探讨
组件绑定原生DOM事件，并非原生DOM事件，而是所谓的自定义事件。如果你想把自定义事件变为原生DOM事件，需要加上修饰符.native修饰这个修饰符，可以把自定义事件【名字：原生DOM类型的】变为原生DOM事件。
比如组件Event1绑定了click事件，
<Event1 @click="handler1"></Event1>，
但是这个click事件不是我们理解的原生click事件，而是一个自定义事件。如果需要编程原生的click事件，需要加上修饰符.native。
<Event1 @click.native="handler1"></Event1>
2-v-model实现组件通信
v-model：指令，可以收集表单数据【text、radio、checkbox、range】等等
切记：v-model收集checkbox需要用数组收集
v-model:实现原理 :value @input
上面两种写法效果是一样的。当然:value @input也可以实现父子数据同步。
3-属性修饰符.sync
属性修饰符.sync，可以实现父子数据同步。在elementUI组件中出现，实现父子数据同步。 给子组件绑定一个自定义事件,事件的名字为update:money（必须取是这个名字）
以上写了一堆逻辑，其实可以使用sync来实现
4-$attrs和$listeners
$attrs：组件实例的属性，可以获取到父亲传递的props数据（前提子组件没有通过props接受）$listeners：组件实例的属性，可以获取到父亲传递自定义事件（对象形式呈现）。
需要注意一点，由于title我们已经使用了props接受，所以在控制台this.$attrs中不会再出现title属性。
5-$children和$parent
ref:可以在父组件内部获取子组件---实现父子通信
$children:可以在父组件内部获取全部的子组件【返回数组】
$parent:可以在子组件内部获取唯一的父组件【返回组件实例】
ref使用场景：
当点击 "找小明借钱100"按钮的时候，baba的存款+100，小明的存款减去100；同样找小红借150元，baba的存款+150，小红的存款减去150；同样的套路可以写一份。
$children:使用场景：找 点击 "找所有的孩子借钱200"。
$parent:可以在点击"给baba钱50"按钮中使用
如果项目中很多JS的逻辑相似，可以使用mixin。比如本实例当中，儿子组件和女儿组件中都有给baba多少钱，逻辑一样，所以我们可以抽取mixin来处理。同样在儿子组件和女儿组件使用mixin来引入使用就行。
6-插槽
作用域插槽:子组件的数据来源于父组件，但是子组件的自己的结构有父亲决定。
src\pages\Communication\ScopeSlotTest\defSlot.vue
<template>
<div>
<h1>作用域插槽</h1>
<List :todos="todos">
<template v-slot="{todo,$index}">
<h1 :style="{color:todo.isComplete?'red':'cyan'}">{{todo.text}}----{{$index}}</h1>
</template>
</List>
<h1>默认插槽</h1>
<Test><template><a href="http://www.baidu.com">百度</a></template></Test>
<Test><template><div>轮播图的结构</div></template></Test>
<div>*************************************</div>
<Test1>
<template><p style="color:red;">我是填坑的爸爸---默认插槽</p></template><!-- 默认插槽 -->
<!-- #fbb其实就是slot='fbb' 简写方式,具名插槽的简写方式 -->
<template #fbb><p style="color:cyan;">我是填坑的爸爸---将来具名插槽---fbb</p></template><!-- 具名插槽 -->
<!-- #fcc其实就是slot='fcc' 简写方式,具名插槽的简写方式 -->
<template #fcc><p style="color:blue;">我是填坑的爸爸---将来具名插槽---fcc</p></template>
</Test1>
</div>
</template>
<script type="text/ecmascript-6">
import List from './List'
import Test from './Test'
import Test1 from './Test1'
export default {
name: 'ScopeSlotTest',
data () {
return {
todos: [
{id: 1, text: 'AAA', isComplete: false},{id: 2, text: 'BBB', isComplete: true},
{id: 3, text: 'CCC', isComplete: false},{id: 4, text: 'DDD', isComplete: false},
]
}
},
components: {
List,Test,Test1
}
}
</script>
src\pages\Communication\ScopeSlotTest\List.vue
<template>
<ul>
<li v-for="(todo,index) in todos" :key="todo.id">
<!-- 作用于插槽的使用 -->
<!-- 下面写法起始不是props,就是作用域插槽的语法,将数据回传给父组件 -->
<slot :todo="todo" :$index="index"></slot>
</li>
</ul>
</template>
<script>
export default {
name: 'List',
props: {
todos: Array
}
}
</script>src\pages\Communication\ScopeSlotTest\Test\index.vue文章来源：https://www.toymoban.com/news/detail-433842.html
<template>
<div>
<pre>学习-默认插槽</pre>
<h1>我喜欢张杰的歌曲</h1>
<!--
slot,本身即为插槽，slot是一个全局组件、默认插槽
底下相当于子组件留了一个'大坑'
-->
<slot></slot>
</div>
</template>
<script>
export default {
name: '',
}
</script>
<style scoped>
</style>
src\pages\Communication\ScopeSlotTest\Test1\index.vue文章来源地址https://www.toymoban.com/news/detail-433842.html
<template>
<div>
<pre>具名插槽</pre>
<!-- 默认插槽:只能有一个-->
<slot></slot>
<!--具名插槽:可以有N个 -->
<slot name="fbb"></slot>
<slot name="fcc"></slot>
</div>
</template>
<script>
export default {
name: '',
}
</script>
<style scoped>
</style>
到了这里，关于vue组件通信方式汇总的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
