vue的组件通讯的几种方式一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第23天，点击查看活动详情。

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第23天，点击查看活动详情。

大家好,我是大帅子,今天给大家讲一下vue的组件通讯的几种方式,下面我们直接开始吧

1. 父向子传值

1. 子组件中定义 props 来接收父组件传递过来的数据

2. 父组件中给子组件标签上进行属性绑定传值

3. 接收代码
props: {
  接收的变量: {
    type: 类型,
    default: 默认值,
    required: 必选项
  }
}

2. 子向父传值

1. 在父组件中给子组件绑定自定义事件, 父组件中定义事件处理函数
     <子组件 :titleChanged="updateTitle"></子组件>

2. 子组件中在恰当的时机, 使用 this.$emit() 触发事件传递数据
    this.$emit("titleChanged","子向父组件传值");//自定义事件 传递值“子向父组件

3. 单向数据流

父组件传过来的数据不能直接在子组件里面修改,要自定义事件传过去然后在父组件里面进行修改, 这就是单向数据流

4. provide/inject

Vue2.2.0新增API,这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。一言而蔽之：祖先组件中通过provider来提供变量，然后在子孙组件中通过inject来注入变量。 provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

举个列子

假设有两个组件： A.vue 和 B.vue，B 是 A 的子组件

 // A.vue
    export default {
      provide: {
      name: '浪里行舟'
    }

  // B.vue
   export default {
      inject: ['name'],
      mounted () {
      console.log(this.name); // 浪里行舟
      }
  }

5. `$parent` / `$children`与 `ref`

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
$parent / $children：访问父 / 子实例
这种就是邪教,改的话也不会,触发vuex的state改变


// 子组件 comA
    export default {
      data () {
        return {
          title: 'Vue.js'
        }
      },
      methods: {
        sayHello () {
          window.alert('Hello');
        }
      }
    }


   // 父组件
    <template>
      <component-a ref="comA"></component-a>
    </template>
    
    <script>
      export default {
        mounted () {
          const comA = this.$refs.comA;
          console.log(comA.title);  // Vue.js
          comA.sayHello();  // 弹窗
        }
      }
    </script>

好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏,
🐣---->🦅 还需努力!大家一起进步!!!

vue的组件通讯的几种方式