实现props的双向绑定

  <div id="app">
    <!-- 1 给属性添加 .sync 修饰符 -->
    <child :childmsg.sync="msg"></child>
  </div>

  <script src="./vue.js"></script>
  <script>
    // 2 props 是只读的，不能修改。
    // 不能修改是说：不能重新赋值

    const vm = new Vue({
      el: '#app',
      data: {
        msg: 'parent data'
      },
      components: {
        child: {
          template: `
            <p @click="fn">子组件 -- {{ childmsg }}</p>
          `,

          props: ['childmsg'],

          methods: {
            fn() {
              // 2 通过 $emit 触发一个特殊形式的事件
              // 事件名称： update: + props属性的名称
              this.$emit('update:childmsg', '修改后的数据')
            }
          }
        }
      }
    })
  </script>

转载于:https://www.cnblogs.com/mushitianya/p/10528306.html