深入理解 Vue 的 .sync 修饰符

·  阅读 298

听说有语法糖?
举个栗子: 儿子向爸爸要钱的场景。

//父组件 Parent
<template>
  <div class="app">
    Parent.vue 我现在有 {{total}}
    <hr>
     <!-- <Child :money.sync="total"/> -->
   <Child :money="total" v-on:update:money="total=$event"/>
  </div>
</template>
<script>
import Child from "./Child.vue";
export default {
  data() {
    return { total: 10000 };
  },
  components: { Child: Child }
};
</script>
复制代码

儿子从爸爸那里知道了可以用多少钱(引用了外部属性,父组件给的),儿子要向爸爸发出**要钱信号(触发事件)**才能拿到钱,直接拿钱不告备将要挨打。

//子组件 Child
<template>
  <div class="child">
    {{money}}
    <button @click="$emit('update:money', money-100)">
      <span>花钱</span>
    </button>
  </div>
</template>
<script>
export default {
  props: ["money"]	//外部属性,
};
</script>
复制代码
  • 组件不能修改 props 外部属性
  • $emit 可以触发事件。第一个参数为事件名,第二个参数返回结果
  • **event会获取到event** 会获取到 emit 的第二个参数,即事件的结果
  • 原理:当父组件将数据给子组件用时,子组件不能随意修改,必须通知父组件修改,才能实现数据的同步更新。


事实上

<Child :money.sync="total"/>
复制代码

的扩展写法就是

<Child :money="total" v-on:update:money="total=$event"/>
复制代码

也就是一个语法糖。
修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定。

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改