VueJS组件之间通过props交互及验证的方式
程序员文章站
2024-01-24 14:15:22
props 是父组件用来传递数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"。
父组件通过...
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 是一个对象而不是字符串数组时，它包含验证要求：
js
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 可以是下面原生构造器：
- string
- number
- boolean
- function
- object
- array
type 也可以是一个自定义构造器，使用 instanceof 检测。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。