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

最新推荐文章于 2023-05-16 22:48:49 发布

Haley6

最新推荐文章于 2023-05-16 22:48:49 发布

阅读量1.2k

点赞数 1

文章标签： sync vue

本文链接：https://blog.csdn.net/Haley6/article/details/114761147

版权

.sync使用

sync是vue中用于实现简单的“双向绑定”的语法糖，在平时的开发中是非常使用的。
vue的prop是单向下行绑定：父级的prop的更新会向下流动到子组件中，但是反过来不行。可是有些情况，我们需要对prop进行“双向绑定”。这个时候，就可以用.sync来解决
一个组件上只能定义一个v-model，如果其他prop也要实现双向绑定的效果该怎么办呢？简单的方法是子组件向父组件发送一个事件，父组件监听该事件，然后更新prop

例如

 <!-- 一个组件上只能定义一个v-model，
        如果其他prop也要实现双向绑定的效果该怎么办呢？
         简单的方法是子组件向父组件发送一个事件，
        父组件监听该事件，然后更新prop。具体如下 -->
  </head>
  <body>
    <div id="app">
      <!-- 由于onIput方法调用会使得valueChanged被触发进而实现父组件数据修改与子组件相同,
            从而实现父组件随着子组件数据改变而改变.即时刻父组件监听子组件改变事件 -->
      <!-- :value="myValue"用于父组件的数据myValue传给子组件的value进而传给input内的value,实现时刻子组件监听父组件改变事件 -->
      <!-- <input type="text"  @valueChanged="changed" :value="myValue" /> -->
      <!-- 注意除非特殊标签否则不要把组件标签写成单标签 -->
      <!-- <info type="text" @valuechanged="changed" :cvalue="myValue"></info>   -->

      <!-- 使用.sync写法 :子组件被父组件传的属性名.sync="父组件的要传递的属性名" 这样写即可很快同时使得父监听子组件-->
      <info type="text" :cvalue.sync="myValue"></info>
      <br />
      <span>myValue:{{myValue}}</span>
    </div>

    <template id="info">
      <!-- :value="value"这个用于把子组件得到的父组件内的value传给表单(input)的value,
             @input="onInput"用于当一输入内容时执行onInput方法以触发改变父组件数据的请求,
            -->
      <!-- <info :value="value"  @input="onInput"></info>  大多情况给子组件监听input值变化也用value,下边为了看的更清晰用cvalue-->

      <!-- 表示把cvalue(值来自父组件的myValue)值传给此时表单内的值 -->
      <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

Haley6

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
.sync详细理解和父子组件传值方法

.sync使用sync是vue中用于实现简单的“双向绑定”的语法糖，在平时的开发中是非常使用的。vue的prop是单向下行绑定：父级的prop的更新会向下流动到子组件中，但是反过来不行。可是有些情况，我们需要对prop进行“双向绑定”。这个时候，就可以用.sync来解决一个组件上只能定义一个v-model，如果其他prop也要实现双向绑定的效果该怎么办呢？简单的方法是子组件向父组件发送一个事件，父组件监听该事件，然后更新prop例如 <!-- 一个组件上只能定义一个v-mo
复制链接

扫一扫