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

更新时间：2020-06-03 02:42:01 作者：startmvc

props是父组件用来传递数据的一个自定义属性。父组件的数据需要通过props把数据传给子组

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 可以是下面原生构造器：