![](/img/trans.png)
[英]Correct way to pass props to all children through slot-scope in Vue.js
[英]What's the correct way to pass props as initial data in Vue.js 2?
所以我想将道具传递给 Vue 组件,但我希望这些道具将来会从该组件内部更改,例如当我使用 AJAX 从内部更新该 Vue 组件时。 所以它们仅用于组件的初始化。
我的cars-list
Vue 组件元素,我将具有初始属性的道具传递给single-car
:
// cars-list.vue
<script>
export default {
data: function() {
return {
cars: [
{
color: 'red',
maxSpeed: 200,
},
{
color: 'blue',
maxSpeed: 195,
},
]
}
},
}
</script>
<template>
<div>
<template v-for="car in cars">
<single-car :initial-properties="car"></single-car>
</template>
</div>
</template>
我现在这样做的方式是,在我single-car
组件中,我在created()
初始化挂钩this.initialProperties
分配给我的this.data.properties
。 它有效并且是反应性的。
// single-car.vue
<script>
export default {
data: function() {
return {
properties: {},
}
},
created: function(){
this.data.properties = this.initialProperties;
},
}
</script>
<template>
<div>Car is in {{properties.color}} and has a max speed of {{properties.maxSpeed}}</div>
</template>
但我的问题是我不知道这是否是正确的方法? 这不会给我带来一些麻烦吗? 或者有更好的方法吗?
感谢这个https://github.com/vuejs/vuejs.org/pull/567我现在知道答案了。
将初始道具直接传递给数据。 就像更新文档中的示例一样:
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
但请记住,如果传递的 prop 是在父组件状态中使用的对象或数组,则对该 prop 的任何修改都将导致该父组件状态的更改。
警告:不推荐使用此方法。 它会让你的组件变得不可预测。 如果您需要从子组件设置父数据,请使用 Vuex 之类的状态管理或使用“v-model”。 https://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components
如果您的初始道具是一个对象或数组,并且您不希望子状态的更改传播到父状态,那么只需使用例如Vue.util.extend
[1] 来制作道具的副本,而不是将其直接指向子数据, 像这样:
props: ['initialCounter'],
data: function () {
return {
counter: Vue.util.extend({}, this.initialCounter)
}
}
您还可以使用扩展运算符来克隆道具。 Igor 答案中的更多详细信息: https ://stackoverflow.com/a/51911118/3143704
但请记住,旧浏览器不支持传播运算符,为了更好的兼容性,您需要转换代码,例如使用babel
。
[1] 请记住,这是一个内部 Vue 实用程序,它可能会随着新版本而改变。 您可能想使用其他方法来复制该道具,请参阅“https://stackoverflow.com/questions/728360/how-do-i-correctly-clone-a-javascript-object”。
我在哪里测试它的小提琴: https ://jsfiddle.net/sm4kx7p9/3/
伴随@dominik-serafin 的回答:
如果您要传递一个对象,您可以使用扩展运算符(ES6 语法)轻松克隆它:
props: {
record: {
type: Object,
required: true
}
},
data () { // opt. 1
return {
recordLocal: {...this.record}
}
},
computed: { // opt. 2
recordLocal () {
return {...this.record}
}
},
但最重要的是要记住使用 opt。 2 如果您传递的是计算值,或者超过异步值。 否则本地值不会更新。
演示:
Vue.component('card', { template: '#app2', props: { test1: null, test2: null }, data () { // opt. 1 return { test1AsData: {...this.test1} } }, computed: { // opt. 2 test2AsComputed () { return {...this.test2} } } }) new Vue({ el: "#app1", data () { return { test1: {1: 'will not update'}, test2: {2: 'will update after 1 second'} } }, mounted () { setTimeout(() => { this.test1 = {1: 'updated!'} this.test2 = {2: 'updated!'} }, 1000) } })
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <div id="app1"> <card :test1="test1" :test2="test2"></card> </div> <template id="app2"> <div> test1 as data: {{test1AsData}} <hr /> test2 as computed: {{test2AsComputed}} </div> </template>
我相信您做对了,因为这是文档中所述的内容。
定义一个使用 prop 的初始值作为其初始值的本地数据属性
我第二次或第三次遇到这个问题,回到一个旧的 vue 项目。
不知道为什么它在 vue 中如此复杂,但我们可以通过watch完成:
export default {
props: ["username"],
data () {
return {
usernameForLabel: "",
}
},
watch: {
username: {
immediate: true,
handler (newVal, oldVal) {
this.usernameForLabel = newVal;
}
},
},
就像另一种方法一样,我通过子组件中的观察者来做到这一点。
这种方式很有用,特别是当你传递一个异步值,并且在你的子组件中你想将传递的值绑定到 v-model 时。
此外,为了使其具有反应性,我在另一个观察者中将本地值发送给父级。
例子:
data() {
return {
properties: {},
};
},
props: {
initial-properties: {
type: Object,
default: {},
},
},
watch: {
initial-properties: function(newVal) {
this.properties = {...newVal};
},
properties: function(newVal) {
this.$emit('propertiesUpdated', newVal);
},
},
这样我就有了更多的控制权和更少的意外行为。 例如,当父级传递的 props 是异步的时,它可能在创建或挂载生命周期时不可用。 所以你可以像@Igor-Parra 提到的那样使用计算属性,或者观察道具然后发出它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.