Vue 中的 .sync 修饰符stop修饰符prevent修饰符可以press.enter修饰符

16lz 2021-08-26

sync

1，是一个语法糖
2，处理组件中数据与外部数据的交互，
因为外部数据不可以只用一部修改完成

<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"/>
  </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>
//这是父组件的来源

注意看数据的流动

stop

是一个阻止默认事件发生的修饰符

prevent

是一个阻止冒泡的事件的修饰符。

press.enter

一个键盘事件的修饰符，要记得键盘按键的编码

更多相关文章

随机推荐