vue2组件通信

初始文件结构

创建一个vue2项目
创建父组件和子组件在app.vue展示父组件
以下是模板 可以直接抄过去练习！！！

//App.vue文件
<template>
  <div class="App-box">
    <Parent />
  </div>
</template>

<script>
import Parent from '@/components/Parent.vue'

export default {
  name: 'App',
  components: {
    Parent
  }
}
</script>

<style></style>

//Parent.vue  父组件
<template>
  <div class="parent-box">
    <div>我是父组件内容</div>
    <Child></Child>
  </div>
</template>

<script>
import Child from '@/components/Child.vue'
export default {
  name: 'Parent-parent',
  components: {
    Child
  },
  data() {
    return {
    }
  }
}
</script>

<style>
.parent-box {
  width: 500px;
  height: 500px;
  background-color: pink;
}
</style>

<style >
.parent-box{
  width: 500px;
  height: 500px;
  background-color:pink;
}
</style>

//Child.vue  子组件
<template>
  <div class="child-box">
    <div>我是子组件内容</div>
  </div>
</template>

<script>
export default {
  name: 'Child-child',
}
</script>

<style>
.child-box {
  width: 300px;
  height: 300px;
  background-color: aqua;
}
</style>

模板效果

以下是重点哦

说再多！不如直接上代码明了
初学不久，错误的地方还望火眼金睛的小伙伴指出
温馨提示：
看懂了是容易忘得！ 和我一起多敲代码吧！这样会加深记忆

一、父子通信

1、使用 v-bind配合porps 向子组件传递数据

v-bind可以简写为 : 号

<!-- Parent.vue  父组件 -->
<template>
  <div class="parent-box">
    <div>我是父组件内容</div>
    <Child :name="name"></Child>
  </div>
</template>

<script>
import Child from '@/components/Child.vue'
export default {
  name: 'Parent-parent',
  components: {
    Child
  },
  data() {
    return {
      name: '小黑纸'
    }
  }
}
</script>

<style>
.parent-box {
  width: 500px;
  height: 500px;
  background-color: pink;
}
</style>

<!-- Child.vue  子组件 -->
<template>
  <div class="child-box">
    <div>我是子组件内容</div>
    <div>接收父传递的数据：{{ name }}</div>
  </div>
</template>

<script>
export default {
  name: 'Child-child',
  // 接收参数的方式一
  // props:['name'],
  // 接收参数的方式二   (推荐)
  props: {
    name: {
      type: String,
      default: ''
    }
  }
}
</script>

<style>
.child-box {
  width: 300px;
  height: 300px;
  background-color: aqua;
}
</style>

效果展示

2、子组件使用emit配合v-on事件 子组件向父组件传递数据

v-on事件绑定 可以简写为@事件名

<!-- Parent.vue  父组件 -->
<template>
  <div class="parent-box">
    <div>我是父组件内容</div>
    <div>接收子组件传递的值：{{parentName}}</div>
    <Child @name="childFn"></Child>
  </div>
</template>

<script>
import Child from '@/components/Child.vue'
export default {
  name: 'Parent-parent',
  components: {
    Child
  },
  data() {
    return {
      parentName:''
    }
  },
  methods:{
    childFn(name){
    console.log("🚀 ~ name:", name)
    this.parentName=name
    }
  }
}
</script>

<style>
.parent-box {
  width: 500px;
  height: 500px;
  background-color: pink;
}
</style>

<style >
.parent-box{
  width: 500px;
  height: 500px;
  background-color:pink;
}
</style>

<!-- Child.vue  子组件 -->
<template>
  <div class="child-box">
    <div>我是子组件内容</div>
    <button @click="onClick">eimt传递给父组件</button>
  </div>
</template>

<script>
export default {
  name: 'Child-child',
  data() {
    return {
      childName:'鸡你太美'
    }
  },
  methods:{
    onClick(){
      this.$emit('name',this.childName)
    }
  }
}
</script>

<style>
.child-box {
  width: 300px;
  height: 300px;
  background-color: aqua;
}
</style>

效果展示

3、使用ref获取子组件的值

<!-- Parent.vue  父组件 -->
<template>
  <div class="parent-box">
    <div>我是父组件内容</div>
    <div>refn拿到的子组件值：{{parentName}}</div>
    <div>refn拿到的子组件值：{{parentAge}}</div>
    <button @click="onClik">ref获取子组件的值</button>
    <Child ref="child"></Child>
  </div>
</template>

<script>
import Child from '@/components/Child.vue'
export default {
  name: 'Parent-parent',
  components: {
    Child
  },
  data() {
    return {
      parentName:'',
      parentAge:''
    }
  },
  methods:{
    onClik(){
    this.parentName=  this.$refs.child.childName
    this.parentAge=  this.$refs.child.age
    }
  }
}
</script>

<style>
.parent-box {
  width: 500px;
  height: 500px;
  background-color: pink;
}
</style>

<style >
.parent-box{
  width: 500px;
  height: 500px;
  background-color:pink;
}
</style>

<!-- Child.vue  子组件 -->
<template>
  <div class="child-box">
    <div>我是子组件内容</div>
  </div>
</template>

<script>
export default {
  name: 'Child-child',
  data() {
    return {
      childName:'鸡你太美',
      age:18
    }
  },
  methods:{
  }
}
</script>

<style>
.child-box {
  width: 300px;
  height: 300px;
  background-color: aqua;
}
</style>

4、使用parent拿到父组件的数据和方法

<!-- Parent.vue  父组件 -->
<template>
  <div class="parent-box">
    <div>我是父组件内容</div>
    <button @click="onClick">父组件按钮</button>
    <Child></Child>
  </div>
</template>

<script>
import Child from '@/components/Child.vue'
export default {
  name: 'Parent-parent',
  components: {
    Child
  },
  data() {
    return {
      parentName:'光遇',
      parentText:'温柔的灵魂终将相遇'
    }
  },
  methods:{
    onClick(){
      console.log('父组件按钮');
    }
  }
}
</script>

<style>
.parent-box {
  width: 500px;
  height: 500px;
  background-color: pink;
}
</style>

<style >
.parent-box{
  width: 500px;
  height: 500px;
  background-color:pink;
}
</style>

<!-- Child.vue  子组件 -->
<template>
  <div class="child-box">
    <div>我是子组件内容</div>
    <button @click="onClick">获取父组件的数据</button>
    <div>拿到的父组件的内容：{{childName}}</div>
    <div>拿到的父组件的内容：{{childTetx}}</div>
  </div>
</template>

<script>
export default {
  name: 'Child-child',
  data() {
    return {
      childName: '',
      childTetx: ''
    }
  },
  methods: {
    onClick() {
      this.childName = this.$parent.parentName
      this.childTetx = this.$parent.parentText
      // 调用父组件的方法
      this.$parent.onClick()
    }
  }
}
</script>

<style>
.child-box {
  width: 400px;
  height: 300px;
  background-color: aqua;
}
</style>

效果展示

5、父组件传递方法.sync子组件$emit修改或传递给父组件数据

一个组件只能使用一个v-model
如果多处需要使用呢？ 这时候就可以通过.sync
:value绑定数据 配合 @update:事件名 可以简写为事件.sync

<!-- Parent.vue  父组件 -->
<template>
  <div class="parent-box">
    <div>我是父组件内容</div>
    <div>我是父组件的数据:{{ parentName }}</div>
    <div>我是父组件的数据:{{ parentText }}</div>
    <!-- 简写   推荐-->
    <Child :name.sync="parentName" :text.sync="parentText"></Child>
    <!-- 下面是常规写法  上面是简写 -->
    <!-- <Child :name="parentName"   @update:name="parentName=$event" @update:text="parentText=$event"  :text="parentText"></Child> -->


  </div>
</template>

<script>
import Child from '@/components/Child.vue'
export default {
  name: 'Parent-parent',
  components: {
    Child
  },
  data() {
    return {
      parentName: '光遇',
      parentText: '温柔的灵魂终将相遇'
    }
  },
  methods: {
  }
}
</script>

<style>
.parent-box {
  width: 500px;
  height: 500px;
  background-color: pink;
}
</style>

<style>
.parent-box {
  width: 500px;
  height: 500px;
  background-color: pink;
}
</style>

<!-- Child.vue  子组件 -->
<template>
  <div class="child-box">
    <div>我是子组件内容</div>
    <button  @click="onClick">点击在子组件改父组件的内容</button>
  </div>
</template>

<script>
export default {
  name: 'Child-child',
  data() {
    return {}
  },
  methods: {
    onClick() {
      this.$emit('update:name','小黑纸')
      this.$emit('update:text','鸡你太美')
    }
  }
}
</script>

<style>
.child-box {
  width: 400px;
  height: 300px;
  background-color: aqua;
}
</style>

效果展示

6、使用组件v-model来实现 子组件可以修改父子间的内容或传递数据

v-model的原理就是:value绑定数据配合@input事件
一个组件只能有一个v-model 如果还需要使用可以通过上面的.sync

<!-- Parent.vue  父组件 -->
<template>
  <div class="parent-box">
    <div>我是父组件内容</div>
    <div>我是父组件的数据:{{ parentName }}</div>
    <!-- 简写 -->
    <Child v-model="parentName" ></Child>
    <!-- 上面简写等于下面 -->
    <!-- <Child  :value="parentName"  @input="parentName=$event" ></Child> -->
  </div>
</template>

<script>
import Child from '@/components/Child.vue'
export default {
  name: 'Parent-parent',
  components: {
    Child
  },
  data() {
    return {
      parentName: '光遇',
    }
  },
  methods: {
  }
}
</script>

<style>
.parent-box {
  width: 500px;
  height: 500px;
  background-color: pink;
}
</style>

<style>
.parent-box {
  width: 500px;
  height: 500px;
  background-color: pink;
}
</style>

<!-- Child.vue  子组件 -->
<template>
  <div class="child-box">
    <div>我是子组件内容</div>
    <button  @click="onClick">点击改父组件的内容</button>
  </div>
</template>

<script>
export default {
  name: 'Child-child',
  data() {
    return {}
  },
  methods: {
    onClick() {
      this.$emit('input','小黑纸')
    }
  }
}
</script>

<style>
.child-box {
  width: 400px;
  height: 300px;
  background-color: aqua;
}
</style>

效果展示

7、使用$children去获取子组件的数据和方法

1.这是使用了at数组方法 at可以传入一个数组下标获取对应下标的数组数据

<!-- Parent.vue  父组件 -->
<template>
  <div class="parent-box">
    <div>我是父组件内容</div>
    <div>获取的子组件数据：{{ParentName}}</div>
    <button @click="ParentClick">获取子组件的方法/变量</button>
    <!-- 子组件 -->
    <Child />
  </div>
</template>

<script>
import Child from '@/components/Child.vue'
export default {
  name: 'Parent-parent',
  data() {
    return {
      ParentName:''
    }
  },
  components: {
    Child
  },
  methods: {
    ParentClick(){
      // 这里我使用了at(0) 实际上和[0]  一样哦
      // at(0)  就是获取数组的第领项
     this.ParentName= this.$children.at(0).ChildName
      console.log(this.$children[0].ChildClick());
    }
  }
}
</script>

<style>
.parent-box {
  width: 500px;
  height: 500px;
  background-color: pink;
}
</style>

<!-- Child.vue  子组件 -->
<template>
  <div class="child-box">
    <div>我是子组件内容</div>
  </div>
</template>

<script>
export default {
  name: 'Child-child',
  data() {
    return {
      ChildName:'学习好枯燥'
    }
  },
  methods: {
    ChildClick(){
      console.log('但一定不影响你大步向前吧~~');  
    }
  }
}
</script>

<style>
.child-box {
  width: 400px;
  height: 200px;
  background-color: aqua;
}
</style>

效果展示

8、使用slot插槽来实现子组件往父组件传递数据

插槽的使用：在这里简单的带一嘴
插槽分为：匿名、具名、作用域插槽
1.在大部分内容相同 小部分内容不同的情况就可以考虑使用插槽
两种常用方式： 1、 # 插槽名 2、v-slot：插槽名
列如： <template #插槽名></template> 传递不同的内容
2.使用的页面使用<slot></slot>占位，外面来决定渲染什么内容
3.里面<slot name='具名插槽名字'></slot> 接收对应的内容
4.里面<slot :数据名:'数据值'></slot> 往外传数据
5.外面<template #插槽名='slot'></template> 这个slot里有传出的数据

<!-- Parent.vue  父组件 -->
<template>
  <div class="parent-box">
    <div>我是父组件的内容</div>
    <div>展示插槽传递的内容：{{ParentObj.id}}</div>
    <div>展示插槽传递的内容：{{ParentObj.text}}</div>
    <div>展示插槽传递的内容：{{ ParentName}}</div>
    <div>展示插槽传递的内容：{{ParentAge}}</div>
    <Child >
      <!-- 这里使用花括号进行结构了 -->
      <template #top="{row}">
        子组件的传递的对象
        <hr>
        <div>
          {{ row }}
        </div>
        <button @click="onContent1(row)">内容1</button>
      </template>
      <br>
      <template v-slot:button="slot">
        <div>
          子组件的数据
          <hr>
         姓名： {{ slot.userName }}
         年龄： {{ slot.age }}
        </div>
        <button @click="onContent2(slot)"> 内容2</button>
      </template>
    </Child>
  </div>
</template>

<script>
import Child from '@/components/Child.vue'
export default {
  name: 'Parent-parent',
  data() {
    return {
      ParentName:'',
      ParentAge:'',
      ParentObj:''
    }
  },
  components: {
    Child
  },
  methods: {
    onContent1(e){
      console.log("🚀 ~ e:", e)
      this.ParentObj=e
    },
    onContent2(e){
      console.log("🚀 ~ e:", e)
      this.ParentName=e.userName
      this.ParentAge=e.age
    }
  }
}
</script>

<style>
.parent-box {
  width: 500px;
  height: 500px;
  background-color: pink;
}
</style>

  <!-- Child.vue  子组件 -->
  <template>
    <div class="child-box">
      <div>我是子组件内容</div>
      <slot name="top" :row="{id:66,text:'你的心情是否需要加糖'}"></slot>
      <slot name="button" :age="18" :userName="'zs'"></slot>
    </div>
  </template>

  <script>
  export default {
    name: 'Child-child',
    data() {
      return {
        ChildName:'学习好枯燥'
      }
    },
    methods: {
    }
  }
  </script>

  <style>
  .child-box {
    width: 400px;
    height: 200px;
    background-color: aqua;
  }
  </style>

效果展示

二、祖先后代通信

1、attrs/listeners 实现祖先级的数据传递

使用$attrs向子孙组件传递数据
$attrs作用：子组件打印this.$attrs你会发现 可以获取到父组件中通过v-bind绑定的传递值，你也可以通过v-bind="$attrs" 继续向孙子组件传递数据。
注意点：绑定的class和style 除外 ，还有在子组件通过props接收过的数据除外

使用v-on="$listeners 修改数据
$listeners作用： 当你在子组件的根元素中使用v-on="$listeners"时，父组件传递给子组件的所有事件监听器都会自动应用到子组件的根元素上。

注意点：使用.native修饰符的事件，不会体现在$listeners属性上。

<!-- Parent.vue  父组件 -->
<template>
  <div class="parent-box">
    <div>我是父组件内容</div>
    <div>父组件内容:{{ parentName }}</div>
    <div>父组件内容:{{ parentText }}</div>
    <!-- 孙祖组件的事件  onAmend -->
    <Child @onAmend="amendFn" :name="parentName" :text="parentText"></Child>
  </div>
</template>

<script>
import Child from '@/components/Child.vue'
export default {
  name: 'Parent-parent',
  components: {
    Child
  },
  data() {
    return {
      parentName: '光遇',
      parentText: '温柔的灵魂终将相遇'
    }
  },
  methods: {
    // 修改方法
    amendFn(e) {
      console.log('孙子组件的数据：', e)
      // e  是孙子组件传递过来的修改数据
      this.parentText = e
    }
  }
}
</script>

<style>
.parent-box {
  width: 500px;
  height: 500px;
  background-color: pink;
}
</style>

<style>
.parent-box {
  width: 500px;
  height: 500px;
  background-color: pink;
}
</style>

<!-- Child.vue  子组件 -->
<template>
  <div class="child-box">
    <div>我是子组件内容</div>
    <button @click="onClick">子组件点击执行打印$attrs</button>
    <Sun v-bind="$attrs" v-on="$listeners"></Sun>
  </div>
</template>

<script>
import Sun from '@/components/Sun.vue'
export default {
  name: 'Child-child',
  // 这里使用props 接收父组件传递过来的name
  // 那么下面的this.$attrs 就获取不到了
  props: ['name'],
  data() {
    return {}
  },
  components:{
    Sun
  },
  methods: {
    onClick() {
      // 由于name使用了porps接收   打印结果为 {text: '温柔的灵魂终将相遇'}
      console.log(this.$attrs) 
    }
  }
}
</script>

<style>
.child-box {
  width: 400px;
  height: 300px;
  background-color: aqua;
}
</style>

<!-- Sun.vue  孙子组件 -->
<template>
  <div class="sun-box">
    <div>我是孙子组件</div>
    <div>使用父亲传递的数据：{{$attrs.text}}</div>
    <button @click="onAmend">孙子组件点击修改数据</button>
  </div>
</template>

<script>
export default {
  name: 'Sun-sun',
  methods:{
    onClick(){
      // 打印结果成   {text: '温柔的灵魂终将相遇'}
      console.log(this.$attrs);
    },
    onAmend(){
      this.$emit('onAmend','已经修改了')
    }
  }
}
</script>

<style>
.sun-box{
  width: 350px;
  height: 200px;
  background-color:bisque;
}
</style>

效果展示

2、使用依赖注入 provide/inject 向子孙组件传递数据

1.在父级组件使用provide 以对象或函数的形式定义传递的数据。
2.在子组件或孙子组件中使用的话可以使用inject来去拿取这个数据。

<!-- Parent.vue  父组件 -->
<template>
  <div class="parent-box">
    <div>我是父组件内容</div>
    <div>父组件内容:{{ parentName }}</div>
    <div>父组件内容:{{ parentText }}</div>
    <Child />
  </div>
</template>

<script>
import Child from '@/components/Child.vue'
export default {
  name: 'Parent-parent',
  data() {
    return {
      parentName: '光遇',
      parentText: '温柔的灵魂终将相遇'
    }
  },
  components: {
    Child
  },
  // 方式一函数写法   如下写法   推荐
  // 方式二  不咋推荐   就不演示了
  // 方式二主要就是以对象的形式来去定义  不能使用this
  // 只能把要传递的数据写死  相对来说不灵活
  provide() {
    return {
      name: '天天开心',
      userName: '张三',
      onClick: this.onClick
    }
  },
  methods: {
    onClick() {
      console.log(`${this.parentName}-${this.parentText}`)
    }
  }
}
</script>

<style>
.parent-box {
  width: 500px;
  height: 500px;
  background-color: pink;
}
</style>

<style>
.parent-box {
  width: 500px;
  height: 500px;
  background-color: pink;
}
</style>

<!-- Child.vue  子组件 -->
<template>
  <div class="child-box">
    <div>我是子组件内容</div>
    <div>父的数据：{{name}}</div>
    <div>父的数据：{{userName}}</div>
    <Sun/>
  </div>
</template>

<script>
import Sun from '@/components/Sun.vue'
export default {
  name: 'Child-child',
  inject:["name","onClick","userName"],
  data() {
    return {}
  },
  components:{
    Sun
  },
  methods: {}
}
</script>

<style>
.child-box {
  width: 400px;
  height: 300px;
  background-color: aqua;
}
</style>

<!-- Sun.vue  孙子组件 -->
<template>
  <div class="sun-box">
    <div>我是孙子组件</div>
    <div>父的数据：{{ name }}</div>
    <div>父的数据：{{ userName }}</div>
    <button @click="onClick">触发父的方法</button>
  </div>
</template>

<script>
export default {
  name: 'Sun-sun',
  inject: ['name', 'onClick', 'userName'],
  methods: {}
}
</script>

<style>
.sun-box {
  width: 350px;
  height: 200px;
  background-color: bisque;
}
</style>

效果展示

三、兄弟组件之间通讯

1、使用$on配合$emit EventBus事件主线来实现

1.在src中创建 bus.js 模块，并向外共享一个vue的实例对象
2.在数据发送方,调用bus.$emit('事件名称',要发送的数据) 方法触发定义自定义事件
3.在数据接收方，调用bus.$on('事件名称'，事件处理函数) 方法注册一个自定义事件

<!-- Parent.vue  父组件 -->
<template>
  <div class="parent-box">
    <div>我是父组件内容</div>
    <!-- 子组件 -->
    <Child />
    <!-- 子组件的兄弟组件 -->
    <Brother/>
  </div>
</template>

<script>
import Child from '@/components/Child.vue'
import Brother from '@/components/Brother.vue'
export default {
  name: 'Parent-parent',
  data() {
    return {}
  },
  components: {
    Child,
    Brother
  },
  methods: {}
}
</script>

<style>
.parent-box {
  width: 500px;
  height: 500px;
  background-color: pink;
}
</style>

<!-- Child.vue  子组件 -->
<template>
  <div class="child-box">
    <div>我是子组件内容</div>
    <button @click="onClick">发送给子组件的兄弟组件</button>
  </div>
</template>

<script>
import bus from  '@/bus'
export default {
  name: 'Child-child',
  data() {
    return {}
  },
  methods: {
    onClick(){
      bus.$emit('content', '时间会给出答案')
      bus.$emit('click', this.click)
    },
    click(){
      console.log('我是传递过来的方法');
    }
  }
}
</script>

<style>
.child-box {
  width: 400px;
  height: 200px;
  background-color: aqua;
}
</style>

<!-- Brother.vue  子组件的兄弟组件 -->
<template>
  <div class="brother-box">
    <div>我是子组件的兄弟组件内容</div>
    <div>子组件传递给兄弟组件的数据：{{ text }}</div>
  </div>
</template>

<script>
import bus from '@/bus'
export default {
  name: 'Brother-brother',
  data() {
    return {
      text: ''
    }
  },
  methods: {
  },
  created() {
    bus.$on('content', v => (this.text = v))
    bus.$on('click',v=>v())
  }
}
</script>

<style>
.brother-box {
  width: 400px;
  height: 200px;
  background-color: chartreuse;
}
</style>

//bus.js文件

import Vue from 'vue'
export default new Vue()

效果展示

四、任意组件通信

1、使用vuex可以实现任意组件的通信

1.想什么想，第一步当然是安装了~
注意点：首先vue2只能使用vuex3，vue3使用vuex4。
其实vue3会使用pinia（大菠萝）相对vuex 会更好用呦~
npm install vuex@3 --save       //安装命令
2.创建vuex
src目录下新建store文件，store文件下新建index.js (代码在下面呦)
在index.js文件里引入vue和vuex创建仓库，最后导出store（仓库）
3.挂载
在mian.js中引入store，最后vue实力对象注入store
4.笨蛋！！使用啊~

效果展示

//  src/store/index.js

// 创建vuex
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  // 变量
  state: {
    name:'陌生人',
    text:'你好！！'
  },
  // 修改vuex中变量的唯一方法
  mutations:{
    changeText(store,val){
      store.text=val
    }
  },
  // 异步操作
  actions:{},
  // 计算属性
  getters:{},
  // 模块化 推荐 大型项目使用modules更方便维护  
  modules:{}
})

export default store

// src/mian.js

import Vue from 'vue'
import App from './App.vue'
import store from './store' // 导入到全局


new Vue({
  // 注入store
  store,
  render: h => h(App),
}).$mount('#app')

<!-- Parent.vue  父组件 -->
<template>
  <div class="parent-box">
    <div>我是父组件内容</div>
    <!-- 直接调用   使用$store.state.定义的变量名 即可 -->
    <div>vuex数据:==>{{$store.state.name}}</div>
    <!-- 子组件 -->
    <Child />
  </div>
</template>

<script>
import Child from '@/components/Child.vue'
export default {
  name: 'Parent-parent',
  data() {
    return {}
  },
  components: {
    Child
  },
  methods: {
  }
}
</script>

<style>
.parent-box {
  width: 500px;
  height: 500px;
  background-color: pink;
}
</style>

<!-- Child.vue  子组件 -->
<template>
  <div class="child-box">
    <div>我是子组件内容</div>
    <div>vuex数据:==>{{$store.state.name}}</div>
    <Sun/>
  </div>
</template>

<script>
import Sun from '@/components/Sun.vue'
export default {
  name: 'Child-child',
  data() {
    return {}
  },
  components:{
    Sun
  },
  methods: {
    onClick(){
   
    }
  }
}
</script>

<style>
.child-box {
  width: 400px;
  height: 200px;
  background-color: aqua;
}
</style>

<!-- Sun.vue  孙子组件 -->
<template>
  <div class="sun-box">
    <div>我是孙子组件</div>
    <div>vuex数据：==>{{$store.state.name}}</div>
    <div>vuex的数据：==>{{$store.state.text}}</div>
    <!-- 少数调用可以使用这种方式   多的话不推荐 使用多了 项目维护起来比较麻烦 -->
    <button @click="$store.commit('changeText','你会越来越好~~')">修改vuex数据</button>
    
    <button @click="changeText('不错呦~学会了吗~')">修改vuex（辅助函数的方式）</button>
  </div>
</template>

<script>
// 通过辅助函数简化调用  比起上面的一行写完更  推荐使用辅助函数
import {mapMutations} from 'vuex'
export default {
  name: 'Sun-sun',
  methods: {
    ...mapMutations(['changeText'])
  }
}
</script>

<style>
.sun-box {
  width: 350px;
  height: 100px;
  background-color: bisque;
}
</style>

还是担心你们两种方式会晕~~
别怕 给你们准备好了哟~~
方式一
直接使用的4种方式
注意:如果你没使用modules 模块化前面的 模块名/ 要去掉

state --> $store.state.模块名.数据项名
getters --> $store.getters['模块名/属性名']
mutations --> $store.commit('模块名/方法名', 其他参数)
actions --> $store.dispatch('模块名/方法名', 其他参数)

方式二
借助辅助方法使用 注意:如果你没使用modules 模块化前面的 模块名/ 要去掉
import { mapState, mapGetters,mapMutations，mapActions } from 'vuex'
...mapState、...mapGetters放computed中；
...mapMutations、...mapActions放methods中；
...mapXxxx('模块名', ['数据项'])
...mapXxxx('模块名', ['方法'])
...mapXxxx('模块名', { 新的名字: 原来的名字 })
组件中直接使用 属性 {{ age }} 或 方法 @click="通过辅助函数直接写方法名(传参)"

小伙伴学会了没~~ 我尽力了呦~

总结辣！

组件通信我分为了四大类
一、父子之间通信
1、v-bind和porps
2、emit和v-on
3、parent
4、.sync
5、v-model
6、chidren
7、slot插槽
8、ref
二、祖先后代通信
1、attrs和listeners
2、依赖注入provide和ingect
三、兄弟之间通信
1、EventBus 事件主线
四、任意组件通信
1、vuex