.sync详细理解和父子组件传值方法

.sync使用
  • sync是vue中用于实现简单的“双向绑定”的语法糖,在平时的开发中是非常使用的。

  • vue的prop是单向下行绑定:父级的prop的更新会向下流动到子组件中,但是反过来不行。可是有些情况,我们需要对prop进行“双向绑定”。这个时候,就可以用.sync来解决

  • 一个组件上只能定义一个v-model,如果其他prop也要实现双向绑定的效果该怎么办呢? 简单的方法是子组件向父组件发送一个事件,父组件监听该事件,然后更新prop

  • 例如

     
      head>
      <body>
        <div id="app">
          
          
          
          
          
    
          
          <info type="text" :cvalue.sync="myValue">info>
          <br />
          <span>myValue:{{myValue}}span>
        div>
    
        <template id="info">
          
          
    
          
          <input :value="cvalue" @input="onInput" />
        template>
    
        <script>
          // info.vue组件定义了一个value 属性, 和一个valueChanged事件
          const info = {
            template: "#info",
            // props: ['value'],
            props: {
              cvalue: "",
            },
    
            methods: {
              onInput(event) {
                //触发valueChanged事件,并且传递表单框内的value值给父组件event.target.value
                // this.$emit("valuechanged", event.target.value);
    
                // 用.sync写法  发射update:子被传递的值的名字,即可触发:cvalue.sync="myValue"事件
                this.$emit("update:cvalue", event.target.value);
              },
            },
          };
    
          let vm = new Vue({
            el: "#app",
            data: {
              myValue: 1234,
            },
            components: {
              info,
            },
            methods: {
              //v是形参,将被传来的event.target.value即修改了的表单的值
              /*   changed(v) {
                this.myValue = v;
                // console.log(this.myValue);
              }, */
              //   当有.sync时,该方法不在需要
            },
          });
        script>
      body>
    
传值总结
  • vue的通信方法常用的有,父传子 props, 子传父 通过绑定@事件,子组件$emit 传值,也可以父组件给子组件props传递一个函数,子组件调用函数,利用参数传值。
  • 其他的还有vuex集中状态管理,eventBus也就是事件的全局$emit, $on 来抛发事件传值
  • 以及接下来的$attrs$listeners 。其实这两个属性的模式,也就是父组件A把很多数据传给子组件B,子组件B利用$attrs 收集起来,然后可以利用v-bind="$attrs"在传给B的子组件C(也就是A组件的孙组件),这样就不用一个一个属性去传了(v-bind="$attrs")
  • 至于$listeners$attrs类似,$listeners 传递的是事件(v-on=“$listeners”),在子组件以及孙组件通过$emit触发事件。

例子仔细见链接: https://www.jianshu.com/p/07d7ca3f4f73#comments

  • 父传给子组件::子组件标签上写 子组件名字="父组件名字" ,子组件用props接收**

  • 子组件传给父组件,通过子组件的一个方法,方法里调用this.$emit(‘触发的纽带名字’,要传给父组件的参数),标签上写

    @触发纽带的名字="要执行的父组件的方法" 该父组件方法里应该定义一个形参便于接收子组件传来的参数,在方法内部可以处理子组件传来的数据,也可保存到父组件的data中

  • 当上述两个结合使用时候,就是v-model的形式,在组件中传递可用.sync

你可能感兴趣的:(sync,vue)