Vue.js 中的组件道具介绍

在使用 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
  • 如果您所需的只是初始传递的代码,并希望在孩子中从那里修改它,请将属性分配给从父母在初始化时传递的初始值
Published At
Categories with 技术
Tagged with
comments powered by Disqus