vue中this.$emit(“update:xx“,value)和xx.sync的用法

最新推荐文章于 2026-04-01 21:35:33 发布

转载最新推荐文章于 2026-04-01 21:35:33 发布 · 1.6w 阅读

61 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.jianshu.com/p/9b4e574158e4

标签

#vue.js #javascript #前端

Vue2.0 专栏收录该内容

239 篇文章

订阅专栏

本文介绍了在Vue项目中父子组件如何进行通信。通常使用props从父组件向子组件传递数据，并遵循单向数据流原则。当子组件需要改变父组件的值时，可以通过$emit触发事件来实现。Vue的.sync修饰符提供了一种简化写法，使得代码更加简洁，其效果等同于使用事件和更新props的方法。

在vue项目中,正常父子组件传值使用props属性,而且要注意props的单向数据流特点,也即父组件通过props向子组件传值,但子组件不能直接改props里面的值,正常的做法一般是通过$emit向父组件发射一个事件,然后传值,达到子组件想要修改父组件值的目的.vue在后面的版本为了简化写法,推出了.sync的语法糖写法,代码更简洁,达到的效果是一样的

//父组件
<template>
  <div class="home">
    {{ originStr }}
   第一种写法
  <!--  <hello-world :message="originStr" @update:message="changeMessage" />  -->
  第二种写法(.sync语法糖的写法)
 <hello-world :message.sync="originStr" />
  </div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from "../components/HelloWorld.vue";

export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  data() {
    return {
      originStr: "你好",
    };
  },
  methods: {
    changeMessage(str) {
      console.log(str);
      this.originStr = str;
    },
  },
};
</script>

//子组件
<template>
  <div class="hello">
    <hr />
    <button @click="btnclick">兄弟点我</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  components: {},
  props: {
    message: {
      type: String,
      default: "",
    },
  },
  methods: {
    btnclick() {
      console.log("触发了事件");
      this.$emit("update:message", "Hello World");
    },
  },
};
</script>

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