vue组件间通信的几种方式:

1. 父向子传递数据，用自定义属性
2. 子向父传递数据，用自定义事件
3. v-modul
4. Vue父子组件传值.sync

1. 父向子传递数据

父向子传值 ==> 父组件

<template>
  <div>
    <!-- 父组件 向子组件 传值 属性绑定 -->
    <!-- <子组件 属性名="值" 属性名="值" 属性名="值" > -->
    <Son
      :title="msg"
      price="50"
    ></Son>
    <Son
      title="我是你爸爸"
      price="180"
    ></Son>
  </div>
</template>

<script>
// 1. 导入组件
import Son from './components/Son'
// 2. 注册组件
export default {
// 3. 使用组件
  components: { Son },
  data() {
    return {
      msg: '你是我儿子---'
    }
  }
}
</script>

父向子传值 ==> 子组件

<template>
  <div>
    <h3>标题: {{ title }}</h3>
    <p>价格: {{price}} 元</p>
  </div>
</template>

<script>
// 在子组件使用 props 来接收  props 是一个数组 
// 将传递过来的数据 当变量来使用
export default {
  props: ['title', 'price']
}
</script>

2. 子向父传递数据

子向父传值 ==> 父组件

<template>
  <div>
    <!-- 子向父传值  自定义事件 -->
    <son @hello="helloFn"></son>
  </div>
</template>

<script>
import Son from './components/Son.vue'
export default {
  components: { Son },
  data() {
    return {
      a: ''
    }
  },
  methods: {
    helloFn(val) {
      // 将子组件里面的数据赋值给  父组件里面的 变量a 
      this.a = val
    }
  }

}
</script>

子向父传值 ==> 子组件

<template>
  <div>
    <h1>我是子组件</h1>
    <button @click="fn">传递数据</button>
  </div>
</template>

<script>
// 目标：将 msg 变量 由子组件 传递给 父组件
// 1. 在子组件里面 准备一个按钮 给按钮注册事件
// 2. 当鼠标点击按钮时 将数据 传递给 父组件
export default {
  data(){
    return {
      msg: 'hello'
    }
  },
  methods: {
    fn() {
      // 子组件里面 需要使用 this.$emit('事件名', 传递过去的数据)
      this.$emit('hello', this.msg)
    }
  }
}
</script>

v-module 父组件给子组件传值 子组件修改父组件方法

v-module的本质其实就是事件绑定和数据绑定结合，是一个语法糖，使用v-bind绑定数据，再使用v-on绑定事件修改数据来实现双向绑定

v-bind绑定的是 :value

v-on绑定的是 @input 父组件

<template>
  <div>
    <!-- msg变量传给Child的value属性(props) -->
    <Child v-model="msg"></Child>
    外面{{msg}}
  </div>
</template>
 
import Child from './Child'
export default {
  data () {
    return {
      msg: '我是你爸爸'
    }
  },
  components: {
    Child
  }
}

子组件

<template>
  <div>
      我是个子组件: {{ value }}
      <button @click="btn">点击修改value</button>
  </div>
</template>
 
export default {
  props: ['value']
  methods: {
    btn () {
      // 外面v-model已经把@input内部实现了, 会把你传出去的值直接给v-model的变量
      this.$emit('input', '子组件传出来的值')
    }
  }
}

.sync 父组件给子组件传值 子组件修改父组件方法

本质：是一个语法糖，简化了父子传值（具体来讲，是简化父组件传值写法）。一个标签可以使用多次
效果：封装组件之后，父子组件之间传值是相当频繁的，父组件通过 props 将值传给子组件，子组件再通过 $emit 将值传给父组件，父组件通过事件监听获取子组件传过来的值
在vue3中取消了.sync 优化了v-model 父组件

<template>
  <div class="app">
     {{arrList}}
    <hr>
    <Child :money.sync="arrList"/>
    // <Child :money="arrList" v-on:update:money="arrList= $event"/>  //两句作用等同
  </div>
</template>
 
<script>
import Child from "./Child.vue";
export default {
  data() {
    return { arrList: 10000 };
  },
  components: { Child }
};
</script>

子组件

<template>
  <div class="child">
    {{money}}
    <button @click="$emit('update:money', money-100)">
    </button>
  </div>
</template>
 
<script>
export default {
  props: ["money"]
};
</script>