Vue入门--第四天--修饰符.sync

指令-Directive

什么是指令？
以v-开头的就是指令
语法：v-指令名:参数=值,如v-on:click=add
如果只里面没有特殊字符，则可以不加引号。
特殊：

• 有些指令没有参数和值，如v-pre
• 有些指令没有值，如v-on:click.prevent
• 没有特殊字符，可以不加引号

修饰符

用来修饰指令

• @click.stop="add"表示阻止事件传播
• @click.prevent="add"表示阻止默认动作
• @click.stop.prevent="add"表示阻止两种的意思

修饰符有很多

重点

.sync修饰符

以下代码是非完整版的Vue
来看代码
父组件中

<template>
  <div class="app">
    App.vue 我现在有{{total}}
    <hr>
    <Child :money="total"/>
  </div>
</template>

<script>
  import Child from "./Child.vue";
  export default {
    data() {
      return { total:10000 };
    },
    components: { Child }
  };
</script>

子组件中Child.vue

<template>
  <div class="child">
    {{money}}
    <button @click="$emit('update:money',money-100)">
      <span>花钱</span>
    </button>
  </div>
</template>

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

props:["money"]接收外部数据，money
需求：子组件想花钱，点击一次，花100块，但是现在钱不在儿子身上，在父亲身上，怎么搞。

用订阅发布模式，eventbus
<Child :money="total" v-on:update:money="total = $event"/>
<button @click="$emit('update:money', money - 100)">
点击button，触发事件update:money事件名就是update:money，就是一个字符串，然后父组件通过$event拿到事件的值

使用了.sync就可以这样写
<Child :money.sync="total"/>
v-on:update:money="total = $event"—>.sync

Vue的规则

• 组件不能修改props外部数据
• $emit可以触发事件，并传参
• $event可以获取$emit的参数（$event就是子组件中的money-100的值，然后赋值给父组件中的total）

总结

搞清楚

• @click.stop = "xxx"
• @click.prevent="xxx"
• @keypress.enter="xxx"
• :money.sync="total"
  即可，@keypress.enter="xxx"上面没有记录