美文网首页
.sync修饰符的使用

.sync修饰符的使用

作者: 皇甫圣坤 | 来源:发表于2019-03-19 19:24 被阅读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>
    

    相关文章

      网友评论

          本文标题:.sync修饰符的使用

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