码迷,mamicode.com
首页 > 其他好文 > 详细

在vue中使用setter改写父子组件传的值

时间:2018-12-24 02:52:04      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:vuejs   不能   ejs   记录   原理   tle   href   this   上下   

概述

最近在用muse ui的时候碰到一个问题,简单来说是这样的,父子之间传值,父组件和子组件使用相同的props命名,并且子组件不用emit,而用等号赋值。

最后使用计算属性的setter函数解决了,记录下来,供以后开发时参考,相信对其他人也有用。

父子组件传值

根据官方文档里面对于sync的描述,可以使用如下方法进行父子组件的传值。

1.父组件在调用子组件的时候使用sync。

<text-document :childTitle.sync="title"></text-document>

上面的代码会被vue处理成下面的形式:

<text-document
  :childTitle="title"
  @update:childTitle="this.title=$event">
</text-document>

2.子组件在定义的时候使用childTitle和emit。在子组件定义的时候,通过props把childTitle传进去就可以使用了,然后通过emit来更新childTitle的值。使用emit的语法如下:

this.$emit('update:childTitle', val);

遇到的问题

一般情况下,使用上面的方法来进行父子组件互相传值已经足够了,但是如果需要加上下面2个条件呢:

  1. 父子组件的变量使用相同的命名。
  2. 子组件不使用emit,而是使用等号进行更新。

对于问题1,直接用相同的命名即可,没有任何问题;但是对于问题2,如果用等号更新的话,开发者工具里面就会报错:不能改变props里面的值。

解决方法

于是我们考虑使用setter来设置一个中间变量,在修改这个变量的时候顺带使用emit修改父组件传进来的值。代码如下:

  // 省略了其他内容
  props: ['childTitle'],
  computed: {
    title: {
      get: function() {
        return this.childTitle;
      },
      set: function(val) {
        this.$emit('update:childTitle', val);
      }
    }
  }

问题思考

1.vue就是通过这个原理来更新的。
2.可以考虑写一个vue库或者npm库,把emit响应转化为等号赋值。

在vue中使用setter改写父子组件传的值

标签:vuejs   不能   ejs   记录   原理   tle   href   this   上下   

原文地址:https://www.cnblogs.com/yangzhou33/p/10166534.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!