父子,子父,非父子组件通信

Posted hff-syt

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了父子,子父,非父子组件通信相关的知识,希望对你有一定的参考价值。

父子组件通信

父亲的数据给子集

父组件向子组件传值

  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'
??})

以上是关于父子,子父,非父子组件通信的主要内容,如果未能解决你的问题,请参考以下文章

87 全局和局部组件, 子父和父子之间的通信 混入 插槽 路飞导航栏

vue组件间通信

Vue3 父子组件通信

12.组件化开发2-非父子组件之间通信-祖先和后代之间的通信

Vue 非父子组件通信方案

vue非父子组件通信