理解vue中的.sync和.$emit

首先来说一下 .sync 修饰符的作用

第一步：先用一句话解释
.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。

第二步：具体解释
一般情况下，想要实现父子组件间值的传递，通常使用的是 props 和自定义事件 $emit 。
其中，父组件通过 props 将值传给子组件，子组件再通过 $emit 将值传给父组件，父组件通过事件j监听获取子组件传过来的值。
如果想要简化这里的代码，可以使用.sync修饰符，实际上就是一个语法糖。

当我们需要通过子组件改变父组件的值时,可以这么实现

<!-- 父组件给子组件传入一个setNum函数 -->
<child :num="numParent" @setNum="(res)=> numParent = res"></child>

//子组件通过调用这个函数来实现修改父组件的状态
methods: {
    changNum(){
      this.$emit('setNum',666)
}

此时子组件只需要触发changNum函数就能执行父组件中的setNum函数从而改变父组件中numParent的值
这么写的话,比较麻烦

我们可以使用sync可简化写法:

这样就可以实现通过点击子组件按钮改变父组件中numParent的值了,比较便捷

接下来,来说一下$emit

父组件中

<template>
  <div>
    <!-- 组件间的参数传递 -->
    <!-- 父子传递 -->
    <!-- 传递方法给子元素: 通过事件传递 @事件名="值" -->
    <!-- 事件名随便起,不要跟系统重复即可: aabb是自定义名称, 不需要提前声明 -->
    <my-son :num="num" @aabb="receiveMsg" />
    <p>
      <button @click="num++">num:{{ num }}</button>
    </p>
    <!-- 子父传递 -->
    <p>子喜欢的队伍: {{ msg }}</p>
    <!-- 兄弟传递 -->
    <!-- 随意关系传递： 事件总线 + vuex 方式 -->
  </div>
</template>

<script>
import MySon from './components/MySon.vue'
export default {
  components: { MySon },
  data() {
    return {
      num: 1,
      msg: '',
    }
  },
  methods: {
    // 父制作一个方法, 用于接收子消息
    receiveMsg(msg) {
      console.log('来自子的消息:', msg)
      this.msg = msg
    },
  },
}
</script>

<style lang="scss" scoped></style>

子组件

<template>
  <div class="box">
    <h2>我是App的子元素</h2>
    <p>来自父元素的num: {{ num }}</p>
    <hr />
    <!-- vue的设计理念: 单向数据流 -- 父和子主动交流, 不允许子主动联系父 -->
    <!-- 1. 需要父提供一个方法，通过事件传递给子元素 -->
    <!-- 2. 然后子元素通过父提供的方法, 来传递数据 -->
    <h3>选择你喜欢的队伍:</h3>
    <button @click="chooseTeam('WBG')">WBG</button>
    <button @click="chooseTeam('EDG')">EDG</button>
    <button @click="chooseTeam('V5')">V5</button>
  </div>
</template>

<script>
export default {
  // props: 声明属性, 接收父传递的值
  props: ['num'],
  methods: {
    chooseTeam(name) {
      // 官方不推荐,但是用的较多:  因为更加简单粗暴
      // $parent: 属性中存储当前组件的父元素
      // 可以直接修改父元素中的属性值, 违背了官方的 单向数据流 原则, 但好用
      // this.$parent.msg = name

      // console.log(this)
      // 当前组件的自定义事件 @aabb 保存在 this.$listeners 中
      // 触发 aabb 中存储的函数(即父提供的 receiveMsg 函数)
      this.$emit('aabb', name)
      // $emit: 触发事件, 相当于:  参数1(参数2), 即 aabb(name)
      // $emit: 专门用于触发自定义事件
      // <组件 @自定义事件名="..."/>
    },
  },
}
</script>

<style lang="scss" scoped>
.box {
  border: 3px solid blue;
  padding: 10px;
}

我直接也写过组件之间是怎么传参的,这些都是很基础的,上手vue必须要学会哦,当然如果能看懂源码会有很大的帮助