美文网首页
Vue 中的 .sync 修饰符

Vue 中的 .sync 修饰符

作者: Sharpe | 来源:发表于2020-06-15 00:39 被阅读0次

原理
.sync修饰符本质上是语法糖,将代码进行了简化。核心原理是对子组件, 对父组件的pros进行监听并且更新。先把父组件的props传入子组件,如果子组件触发事件,对父组件的props进行修改,.sync就会监听该事件并且更新父组件的props
Vue规则

组件不能修改外部数据props,只能触发事件,通知父组件的props进行修改
this.emit可以触发事件,并且传递参数event可以获取$emit的参数

场景
爸爸有1w块钱,儿子打电话请求爸爸传钱(触发事件),然后进行花费
代码实例

// 儿子组件,从爸爸组件那里请求钱,然后消费
<template>
  <div class="child">
    {{money}}
    // 点击按钮,触发事件
    <button @click="$emit('update:money', money-100)">
      <span>花钱</span>
    </button>
  </div>
</template>

<script>
export default {
  props: ["money"]
};
</script>

<style>
.child {
  border: 3px solid green;
}
</style>
// 爸爸组件,传钱给儿子,并监听儿子动态
<template>
  <div class="app">
    App.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>

<style>
.app {
  border: 3px solid red;
  padding: 10px;
}
</style>

相关文章

  • 深入理解vue 修饰符sync【 vue sync修饰符示例】

    在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前...

  • 2018-10-11

    vue 修饰符sync【 vue sync修饰符示例】 先看下一个参考的文章:深入理解vue 修饰符sync【 v...

  • 关于vue的一些实践

    参考文章:vue中需要注意的问题总结(上) 1.对于sync的使用 参考vue的修饰符sync 在有些情况下,我们...

  • vue3 的 v-model

    子组件 类似于vue2的.sync 修饰符

  • .sync修饰符及MVVM

    .sync修饰符 父组件 子组件 vue的数据响应式

  • vue中的.sync修饰符

    产生缘由 vue中组件间的传值为单向传递,子组件想要更新父组件的值,需要用emit触发父组件函数,用.sync修饰...

  • Vue 中的 .sync 修饰符

    原理.sync修饰符本质上是语法糖,将代码进行了简化。核心原理是对子组件, 对父组件的pros进行监听并且更新。先...

  • Vue 中的 sync 修饰符

    子组件修改父组件中的某个属性值,正常写法 使用sync修饰符的写法 操作步骤:子组件中: this.$emit("...

  • vue中的.sync修饰符

    .sync是一个语法糖 Vue的三个规则 组件不能修改props外部数据 $emit可以触发事件并传参 $even...

  • Vue中的.sync修饰符

    在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组...

网友评论

      本文标题:Vue 中的 .sync 修饰符

      本文链接:https://www.haomeiwen.com/subject/oyvqxktx.html