父子，子父，非父子组件通信

Posted 2020-11-16 hff-syt

父子组件通信

父亲的数据给子集

父组件向子组件传值

1. ??? 子组件在props中创建一个属性，用于接收父组件传过来的值；

2. ??? 父组件 引入子组件-->注册子组件-->引用子组件；

3. ??? 在子组件标签中添加子组件props中创建的属性；

4. ??? 将所要传递的值赋值给该属性。

props：

1. prop类型：通常你希望每个prop都有指定的数据类型，你可以以对象的形式列出prop，对象的属性的名称和值分别对应了prop的值和类型。

2. 单向数据流：所有的prop都使得其父子prop形成一个单向数据流，即单向下数据流。父级prop的更新会单向流动到子组件中，但是反过来则不行，单向数据流能防止子组件意外改变父组件的状态。额外的，每次父组件发生改变时，子组件中的prop将会更新为最新的值。

• 子组件通过props选项来接收属性，接收到的属性可以像全局变量一样在组件的模板中使用

props:?['aa']

• ?属性验证??-?js是弱类型语言

?props:?{
???????'aa':?Number?//?String?Boolean?Object?Array?
       }

• vue3.0使用ts,ts是强类型

??<div?id="app">
????<Father></Father>
??</div>
??<template?id="father">
????<div>
??????<!--?使用单项数据绑定将一个数据绑定给一个自定义的属性?-->
??????<Son?:aa?=?"money"?/>
????</div>
??</template>
??<template?id="son">
????<div>
??????<p>老爸给了我?{{?aa?}}?块?</p>
??????<p>?{{?aa?+?20?}}??</p>
????</div>
??</template>
  
<script>
??Vue.component('Father',{
????template:?'#father',
????data?()?{
??????return?{
????????money:?4000
??????}
????}
??})
??Vue.component('Son',{
????template:?'#son',
????/*?子组件通过props选项来接收属性，接收到的属性可以像全局变量一样在组件的模板中使用?*/
????//?props:?['aa']
????/*?属性验证??-?js是弱类型语言*/
????props:?{
??????//?'aa':?Number?//?String?Boolean?Object?Array?
??????'aa':?{
????????validator?(?val?)?{
??????????return?val?>?3000
????????}
??????}
??????/*?vue3.0使用ts,ts是强类型?*/
????}
??})
??new?Vue({
????el:?'#app'
??})
</script>

###### 子父组件通信
子的数据给父亲

子组件向父组件传值

1. ??? 子组件需要以某种方式，例如点击事件的方法来触发一个自定义事件

2. ??? 将所需要传递的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法

3. ??? 父组件 引入子组件-->注册子组件-->引用子组件

4. ??? 在子组件标签上绑定对自定事件的监听

自定义事件

1. ?? ?父组件通过$on监听事件，事件处理函数的参数则为接收的数据

2. ?? ?子组件通过$emit可以触发事件，第一个参数为要触发的事件，第二个事件为要传递的数据?

3. ?? ?sync修饰符：对一个 prop 进行双向绑定

<div?id="app">
????<Father></Father>
??</div>
??<template?id="father">
????<div>
??????<p>?儿子给我发了?{{?xiaojinku?}}?的红包?</p>
??????<!--?自定义事件?-->
??????<Son?@hongbao?=?"get"/>
????</div>
??</template>
??<template?id="son">
????<div>
??????<button?@click?=?"give">?发红包?</button>
????</div>
??</template>
</body>

<script>
??Vue.component('Father',{
????template:?'#father',
????data?()?{
??????return?{
????????xiaojinku:?0
??????}
????},
????methods:?{
??????get?(?val?)?{
????????this.xiaojinku?=?val
??????}
????}
??})
??Vue.component('Son',{
????template:?'#son',
????data?()?{
??????return?{
????????hongbao:?2000
??????}
????},
????methods:?{
??????give?()?{
????????this.$emit('hongbao',this.hongbao)
??????}
????}
??})
??new?Vue({
????el:?'#app'
??})
</script>

非父子组件通信（兄弟姐妹通信）

兄弟通信 找父作为中间值
子传父->父传子

<div?id="app">
????<Father></Father>
??</div>
??<template?id="father">
????<div>
??????<h3>?father组件?</h3>
??????<hr>
??????<!--?使用自定义属性形式将一个方法传递给子组件?-->
??????<Girl></Girl>
??????<hr>
??????<Son></Son>
????</div>
??</template>
??<template?id="son">
????<div>
??????<h3>?son组件?</h3>
??????<img?v-if?=?"flag"?src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3872048339,4140466773&fm=26&gp=0.jpg"?alt="">
??????<img?v-else?src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2438534582,3797477605&fm=26&gp=0.jpg"?alt="">
????</div>
??</template>
??<template?id="girl">
????<div>
??????<h3>?girl组件?</h3>
??????<button?@click?=?"hit">?揍弟弟?</button>
????</div>
??</template>
</body>

<script>
??/*?定义了实例bus?-?bus上有?$on??$emit??*/
??var?bus?=?new?Vue()
??Vue.component('Father',{
????template:?'#father',
??})
??Vue.component('Son',{
????template:?'#son',
????/*?组件是独立的，自己的数据自己改?*/
????data?()?{
??????return?{
????????flag:?true?
??????}
????},
????mounted?()?{
??????/*?mounted表示挂载结束，也就是我们能看到界面了，也就是事情做完了?*/
??????/*?这个函数会自动执行?*/
??????var?_this?=?this?
??????/*?通过bus绑定了自定义事件?*/
??????bus.$on('ku',function?()?{
????????_this.flag?=?!_this.flag?
??????})
????}
??})
??Vue.component('Girl',{
????template:?'#girl',
????methods:?{
??????hit?()?{
????????bus.$emit('ku')
??????}
????}
??})
??new?Vue({
????el:?'#app'
??})