0
点赞
收藏
分享

微信扫一扫

最佳实践: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: 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
}
}
}

关于 watch 和 computed 区别: ​​vue computed正确使用方式​​


举报

相关推荐

0 条评论