H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue中v-bind修饰符.sync和.once没效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind onece sync用法</title>
</head>
<body>
    <div id="example">
        <input type="text" v-model="msg">
    <child :msg.sync="msg"></child>
    </div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script type="text/javascript">
        var child = Vue.extend({
      props: ['msg'],
      template: '<div><button v-on:click="changeChildMsg">click</button><p>{{msg}}</p></div>',
      methods: {
        changeChildMsg () {
          this.msg = 'Hello Vue!'
        }
      }
    })
    var vm = new Vue({
      el: '#example',
      data () {
        return {
          msg: 'wang wang wang!'
        }
      },
      components: {
        child: child
      }
    })
    </script>
</body>
</html>

Vue文档说明.sync能让子组件数据和父组件数据进行双向绑定。可为何当点击子组件中click按钮后,vm.msg还是wang wang wang!

回答:

vue的文档里写的很清楚:
从 2.3.0 起我们重新引入了 .sync 修饰符,但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。
如下代码
<comp :foo.sync="bar"></comp>
会被扩展为:
<comp :foo="bar" @update:foo="val => bar = val"></comp>
当子组件需要更新 foo 的值时,它需要显式地触发一个更新事件:
this.$emit('update:foo', newValue)

因此你的

changeChildMsg () {
          this.msg = 'Hello Vue!'
        }

改成

changeChildMsg () {
           this.$emit('update:msg', "hello")
        }

回答:

图片描述vue2.0已经移除v:bind的.sync和.once

本文地址:H5W3 » vue中v-bind修饰符.sync和.once没效果

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址