在使用 Vue.js 创建组件时,你会很快发现,即使在父母和子女等级中,组件也对父母或子女一无所知。
过渡数据
假设您有父母组件和子女组件,并且您希望将父母的宝贵Thing数据属性传递给孩子。
1[label ParentComponent.vue]
2<template>
3 <child-component :myProp="preciousThing"></child-component>
4</template>
5
6<script>
7import ChildComponent from './ChildComponent.vue';
8
9export default {
10 components: {
11 ChildComponent
12 },
13
14 data() {
15 return {
16 preciousThing: 'ring'
17 }
18 }
19}
20</script>
然后,为了接受它,儿童组件需要声明它希望 myProp 属性传递给它。
1[label ChildComponent.vue]
2<template>
3 <h2>The precious thing: {{myProp}}</p>
4</template>
5
6<script>
7export default {
8 props: [
9 'myProp'
10 ]
11}
12</script>
孩子组件现在可以访问 this.myProp. 当 preciousThing 更改父母组件时,孩子组件上的 myProp 属性也将被更新。
警告
字面预告
如果你所要做的就是将字母字符串传递给一个小组件,你不需要绑定表达式(v-bind:或 :). 这是一个常见的错误,而只是把它传递为一个正常的HTML属性,例如 myProp="string」。 如果你想传递一个数字或一个布尔语,你仍然必须使用绑定表达式(:myProp="boolean").
更改过去的数据
通过附件传递给儿童组件的原始值无法更改. 如果您尝试这样做,Vue 会发出警告。但是,诸如对象和数组等复杂值,虽然无法重新分配,但可以修改。
- 如果您想将数据传回父母组件,请使用 events。
- 若要将数据保持在父母与儿童之间同步,请使用 v-model。
- 如果您想重新定义从父母传递的属性,但保持其反应性,请使用 computed property。
- 如果您所需的只是初始传递的代码,并希望在孩子中从那里修改它,请将属性分配给从父母在初始化时传递的初始值