作者:boonya 字体:[增加 减小] 类型:转载 时间:2017-09-04 我要评论
props 是父组件用来传递数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 "prop"。
父组件通过props将数据传递给子组件
- <!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 可以是下面原生构造器:
type 也可以是一个自定义构造器,使用 instanceof 检测。
来源: http://www.jb51.net/article/122786.htm