.sync修饰符的使用

2019-03-19  本文已影响0人  皇甫圣坤

在原生事件中,$event是事件对象

在自定义事件中,$event是传递过来的数据

如果我们给v-bind添加了sync,那么子组件中就有一个事件可以触发 update:xxx自定义事件并且传递要修改的值

  <child v-bind:m.sync="data中的值"></child>
    const child = {
      template: ``,
      methods: {
        handler () {
          this.$emit('updata:m', 要修改的值)
        }
      }
    }

eg:

<div id="app">
    <child :msg.sync="msg"></child>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    const child = {
      template: `
        <div>
          {{msg}}
          <hr/>
          <button @click="changeMsg">点击</button>
        </div>
      `,
      props: {
        msg: String
      },
      methods: {
        changeMsg () {
          this.$emit('update:msg', '新的内容')
        }
      }
    }
    Vue.component('child', child)
    const app = new Vue({
      el: "#app",
      data: {
        msg: '父组件中的数据'
      }
    })
  </script>
上一篇下一篇

猜你喜欢

热点阅读