VueJS组件之间通过props交互及验证的方式

2019-11-19 15:34:11

字体：大中小

来源：转载

供稿：网友

props 是父组件用来传递数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"。

父组件通过props将数据传递给子组件

HTML

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例 - 菜鸟教程(runoob.com)</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="app">  <child message="hello world!">props传递给子组件</child></div><script>// Vue.component('child', { // 声明 props props: ['message'], // 同样也可以在 vm 实例中像 “this.message” 这样使用 template: '<h1>{{ message }}</h1>'})// 创建根实例new Vue({ el: '#app'})</script></body></html>

效果如图：

动态 props组建数据传递

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：

HTML

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例 - 菜鸟教程(runoob.com)</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="app">  <div>   <input v-model="parentMsg">   <br>   <child v-bind:message="parentMsg"></child>  </div></div><script>// 注册Vue.component('child', { // 声明 props props: ['message'], // 同样也可以在 vm 实例中像 “this.message” 这样使用 template: '<span>{{ message }}</span>'})// 创建根实例new Vue({ el: '#app', data: {  parentMsg: '父组件内容' }})</script></body></html>

效果如图：

v-bind 指令将 todo 传到每一个重复的组件中

HTML

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例 - 菜鸟教程(runoob.com)</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="app">  <ol>  <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>   </ol></div><script>Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>'})new Vue({ el: '#app', data: {  sites: [   { text: 'Runoob' },   { text: 'Google' },   { text: 'Taobao' }  ] }})</script></body></html>

效果如下：

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

组件为 props 指定验证要求

props 是一个对象而不是字符串数组时，它包含验证要求：

Vue.component('example', { props: {  // 基础类型检测 （`null` 意思是任何类型都可以）  propA: Number,  // 多种类型  propB: [String, Number],  // 必传且是字符串  propC: {   type: String,   required: true  },  // 数字，有默认值  propD: {   type: Number,   default: 100  },  // 数组／对象的默认值应当由一个工厂函数返回  propE: {   type: Object,   default: function () {    return { message: 'hello' }   }  },  // 自定义验证函数  propF: {   validator: function (value) {    return value > 10   }  } }})

type 可以是下面原生构造器：