vue的prop父子组件传值

Posted 2021-03-21 icctuan

props down, events up

父组件通过 props 向下传递数据给子组件；子组件通过 events 给父组件发送消息。

静态 props

要让子组件使用父组件的数据，需要通过子组件的 props 选项。给 childNode 添加一个 props 选项和需要的forChildMsg数据;

var childNode = {

 template: `

  <div>

   {{forChildMsg}}

  </div>

  `,

 props: ["for-child-msg"]

};

props 声明的属性，在父组件的 template 模板代表子组件的地方，属性名需要使用中划线写法；

子组件 props 属性声明时，使用小驼峰或者中划线写法都可以；而子组件的模板使用从父组件传来的变量时，需要使用对应的小驼峰写法

 

动态 props

在模板中，要动态地绑定父组件的数据到子组件模板的 props，和绑定 html 标签特性一样，在父组件的template模板里使用v-bind绑定；

<child :for-child-msg="childMsg2"></child>

 

props 验证

验证传入的 props 参数的数据规格，如果不符合数据规格，Vue 会发出警告。

Vue.component("example", {

 props: {

 // 基础类型检测, null意味着任何类型都行

 propA: Number,

 // 多种类型

 propB: [String, Number],还可以在 props 定义的数据中加入自定义验证函数，当函数返回 false 时，输出警告。该函数命名是规定叫validator，自定义函数名不会生效。

props: {

 "for-child-msg": {

  validator: function(value) {

  return value > 100;

  }

 }

}

 

单向数据流

props 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。

 

修改 props 数据

定义一个局部变量，并用 prop 的值初始化它。但是由于定义的 ownChildMsg 只能接受 forChildMsg 的初始值，当父组件要传递的值变化发生时，ownChildMsg 无法收到更新。

更加妥帖的方式是使用变量存储 prop 的初始值，并用 watch 来观察 prop 值得变化。发生变化时，更新变量的值。

 data() {

 return {

  ownChildMsg: this.forChildMsg

 };

 },

 watch: {

 forChildMsg() {

  this.ownChildMsg = this.forChildMsg;

 }

 }

 

对于绝大多数特性来说，从外部提供给组件的值会替换掉组件内部设置好的值。所以如果传入 type="text" 就会替换掉 type="date" 并把它破坏！庆幸的是，class 和 style 特性会稍微智能一些，即两边的值会被合并起来，从而得到最终的值。

 

如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false。