专栏首页Super 前端vue组件引用传值的最佳实践

vue组件引用传值的最佳实践

下述组件传值指引用类型(数组或对象)传值。

准备:单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。

额外的,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。

  • 这个 prop 用来传递一个初始值;这个子组件接下来希望将其作为一个本地的 prop 数据来使用。 定义一个本地的 data property 并将这个 prop 用作其初始值 props: ['initialCounter'], data: function () { return { counter: this.initialCounter } }
  • 这个 prop 以一种原始的值传入且需要进行转换。 使用这个 prop 的值来定义一个计算属性 props: ['size'], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } }

注意在 JavaScript 中对象和数组是通过引用传入的,所以对于一个数组或对象类型的 prop 来说,在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。

问题

父子组件间,通过引用类型传值,为什么控制台不会告警(基本类型会告警)?Object.assign() 或者 JSON.parse(JSON.stringify()) 是在子组件中传引用值的标准处理方法吗?

问题1

父组件 App.vue

<template>
  <div id="app">
    <child :initialValue="valueEmit">
    </child>
  </div>  
</template>  
<script>
import childEmit from './components/child.vue'
export default {
	data () {
    return {
      valueEmit: {dog: 1, cat: 2}
    }
  },
  components: {
    child
  }
}        
</script>        

子组件 components/child.vue

<template>
  <div class="child-container">
    <p> 
      <label for="cat">猫?:</label>
      <input id="cat" type="text" v-model="value.cat" />
    </p>
    <p>
      <label for="dog">狗?:</label>
      <input id="dog" type="text" v-model="value.dog" />
    </p>
  </div>
</template>
<script>
export default {
  name: 'child',
  props: {
    initialValue: Object
  },
  data () {
    return {
      value = Object.assing({}, this.initialValue)
    }
  }
}
</script>

子组件内的修改,父组件也会直接变更,且不告警!

问题2

修改子组件,子组件 components/child.vue

export default {
  name: 'child',
  props: {
    initialValue: Object
  },
  data () {
    return {
      valueEmit: Object.assign({}, this.initialValue)
    }
  }
}

切断了引用,但是父组件变化不会触发子组件响应!(computed or watch 可以实现)

问题3

父组件 App.vue

<template>
  <div id="app">
    <child
      :initialValue="valueEmit"
      @update-value-by-child="updateParentValue">
    </child>
  </div>  
</template>  
<script>
import childEmit from './components/child.vue'
export default {
	data () {
    return {
      valueEmit: {dog: 1, cat: 2}
    }
  },
  components: {
    child
  },
  methods: {
    updateParentValue(newValue) {
      this.valueEmit = newValue
    }
  }
}        
</script>        

子组件 components/child.vue

<template>
  <div class="child-container">
    <p> 
      <label for="cat">猫?:</label>
      <input id="cat" type="text" v-model="valueEmit.cat"
        @input="$emit('update-value-by-child', valueEmit)" />
    </p>
    <p>
      <label for="dog">狗?:</label>
      <input id="dog" type="text" v-model="valueEmit.dog" />
    </p>
  </div>
</template>
<script>
export default {
  name: 'child',
  props: {
    initialValue: Object
  },
  data() {
    return {
      valueEmit: Object.assign({}, this.initialValue)
    }
  }
}
</script>

现象:

  1. 首先对“dog”进行修改,父组件的 initialValue 并未发生改变
  2. 对“cat”进行修改,父组件的 initialValue 发生变化(dog、cat都被修改了)
  3. 此时,在对“dog”修改,父组件的 initialValue 发生变化!

总结

  1. 纯展示 直接使用父组件属性,不会有副作用!
<template>
	<div>
    {{parentObj.value}}
  </div>
</template>
<script>
	export default {
    name: 'child',
    props: {
      parentObj: Object
    }
  }
</script>

  1. 只子组件内部修改,父组件不会修改(即,父组件只做初始化) 子组件 data 中声明新的数据,通过 Object.assign() 或者 JSON.parse(JSON.stringify()) 切断引用即可。
<template>
	<div>
    <input type="text" v-model="childObj.value">
  </div>
</template>
<script>
	export default {
    name: 'child',
    props: {
      parentObj: Object
    },
    data () {
      return {
        childObj: Object.assign({}, this.parentObj)
      }
    }
  }
</script>
  1. 父子组件都会修改 通过 computed 或者 watch 进行处理
<template>
	<div>
    <input type="text" v-model="childObj.value">
  </div>
</template>
<script>
	export default {
    name: 'child',
    props: {
      parentObj: Object
    },
    computed: {
      childObj () {
        return Object.assign({}, this.parentObj)
      }
    }
  }
</script>
或者 watch 方式

export default {
  name: 'child',
  props: {
    parentObj: Object
  },
  data () {
    return {
      childObj: {}
    }
  },
  watch: {
    parentObj: {
      handler (val, oldVal) {
        if (val) {
          this.childObj = Object.assign({}, this.parentObj)
        }
      },
      deep: true,
      immediate: true
    }
  }
}
  1. 关于 watch 和 computed 区别: vue computed正确使用方式

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Promise 常用API

    这段代码创建一个promise对象,定义了处理onFulfilled和onRejected的函数(handler),然后返回这个promise对象。这个prom...

    奋飛
  • Vue基础:组件--组件及组件通信

    组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML...

    奋飛
  • Promise

    注意:Node.js等规定在JavaScript的回调函数的第一个参数为 Error 对象,这也是它的一个惯例。

    奋飛
  • Vue2高版本新特性的总结及其使用

    在项目开发中,如果业务比较复杂,特别像中台或B端功能页面都不可避免的会用到第三方组件库,产品有时会想对这些组件进行一些UI方面的定制。如果这些组件采用的是有作用...

    javascript.shop
  • 组件化——前端编程的选择

    一、前端为什么要做组件化 在大型软件系统中,web应用的前后端已经实现了分离,而随着REST软件架构的发展,后端服务逐步倾向于微服务,简单来说就是将一个大型后...

    yuanyi928
  • ApiTemplate:.net后端项目模板完善与总结

    ApiTemplate后端项目开发模板,发布也有一段时间了。为了补充应用场景,以及详细说明本人总结的一些开发经验,现已常见的《用户/登录权限验证》功...

    sam dragon
  • 小程序的autocomplete

    1、别做单个组件的autocomplete了,很坑,牵扯的坑太多,最后碰到原生组件canvas会让人欲哭无泪

    windseek
  • vue 父子组件的方法调用

    庞小明
  • 打造一套安全的UI组件库!

    现在再开发一套UI框架似乎已经错过了最佳创业时期,毕竟网上优秀的框架一大堆,轻量级的,重量级的,有依赖的,无依赖的,拿来即用的,需要配置的,应有尽有。但是老衲我...

    Jean
  • 消费者端微组件的实现

    在消费者端,为了方便各条业务线接入,我们通常以组件的方式提供功能,但是组件的发布必须依赖于页面的发布,页面发布又通常需要业务方统一操作,比较影响组件的迭代速度。...

    有赞coder

扫码关注云+社区

领取腾讯云代金券