“Vue从入门到实战:使用Prop向子组件传递数据”的版本间的差异
来自CloudWiki
第15行: | 第15行: | ||
<blog-post title="Why Vue is so fun"></blog-post></nowiki> | <blog-post title="Why Vue is so fun"></blog-post></nowiki> | ||
− | + | ==基本使用== | |
+ | |||
+ | 这是一个父子组件的典型例子,演示如何向组件之中传递数据。 | ||
<nowiki> | <nowiki> | ||
第56行: | 第58行: | ||
</html> | </html> | ||
</nowiki> | </nowiki> | ||
+ | |||
+ | 注: | ||
+ | |||
+ | *在字符串模板中,不必必须使用kebab-case命名法(短横线分割命名),各种命名可以直接使用。 | ||
+ | *与普通的HTML元素的属性传值一样,要想接收动态值,需要使用v-bind指令,否则,接收的值都是静态的字符串值 | ||
+ | |||
+ | ==传递多个数值== | ||
+ | 如果组件需要接收多个传值,那么可以定义多个prop: | ||
+ | |||
+ | <nowiki> | ||
+ | <!DOCTYPE html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <meta charset="UTF-8"> | ||
+ | <script src="vue.js"></script> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div id="app"> | ||
+ | <post-list></post-list> | ||
+ | </div> | ||
+ | |||
+ | <script> | ||
+ | Vue.component('PostItem', { | ||
+ | props: ['author','title','content'], | ||
+ | template: ` | ||
+ | <div> | ||
+ | <h3>{{ title }}</h3> | ||
+ | <p> 作者:{{ author }}</p> | ||
+ | <p>{{ content }}</p> | ||
+ | </div>` | ||
+ | }); | ||
+ | |||
+ | Vue.component('PostList', { | ||
+ | data() { | ||
+ | return { | ||
+ | |||
+ | author: '孙鑫', | ||
+ | title: 'Vue.js无难事', | ||
+ | content: '这本书不错' | ||
+ | |||
+ | } | ||
+ | }, | ||
+ | template: `<div><PostItem | ||
+ | :author="author" | ||
+ | :title="title" | ||
+ | :content="content"> | ||
+ | </PostItem></div>` | ||
+ | }); | ||
+ | |||
+ | new Vue({ | ||
+ | el: '#app' | ||
+ | }) | ||
+ | </script> | ||
+ | </body> | ||
+ | </html></nowiki> | ||
+ | |||
+ | ==通过对象传值== | ||
+ | 如果需要传入的属性较多,也可以封装一个对象来传值。 | ||
+ | |||
+ | <nowiki> | ||
+ | <!DOCTYPE html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <meta charset="UTF-8"> | ||
+ | <script src="vue.js"></script> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div id="app"> | ||
+ | <post-list></post-list> | ||
+ | </div> | ||
+ | |||
+ | <script> | ||
+ | Vue.component('PostItem', { | ||
+ | props: ['post'], | ||
+ | template: ` | ||
+ | <div> | ||
+ | <h3>{{ post.title }}</h3> | ||
+ | <p> 作者:{{ post.author }}</p> | ||
+ | <p>{{ post.content }}</p> | ||
+ | </div>` | ||
+ | }); | ||
+ | |||
+ | Vue.component('PostList', { | ||
+ | data() { | ||
+ | return { | ||
+ | post: { | ||
+ | author: '孙鑫', | ||
+ | title: 'Vue.js无难事', | ||
+ | content: '这本书不错' | ||
+ | } | ||
+ | } | ||
+ | }, | ||
+ | template: '<div><PostItem :post="post"/></div>' | ||
+ | }); | ||
+ | |||
+ | new Vue({ | ||
+ | el: '#app' | ||
+ | }) | ||
+ | </script> | ||
+ | </body> | ||
+ | </html></nowiki> |
2021年2月10日 (三) 07:33的版本
在使用组件时,给组件元素设置属性,组件内部如何接收呢 ?
首先需要在组件内部注册一些自定义的属性,称为prop
Vue.component('blog-post', { props: ['title'], template: '<h3>{{ title }}</h3>' })
之后,在使用组件时,就可以通过属性向组件传递数据:
<blog-post title="My journey with Vue"></blog-post> <blog-post title="Blogging with Vue"></blog-post> <blog-post title="Why Vue is so fun"></blog-post>
基本使用
这是一个父子组件的典型例子,演示如何向组件之中传递数据。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="vue.js"></script> </head> <body> <div id="app"> <post-list></post-list> </div> <script> Vue.component('PostItem', { // 声明props props: ['postTitle'], // postTitle就像data中定义的数据属性一样, // 在该组件中可以像 "this.postTitle" 这样使用 template: '<h3>{{ postTitle }}</h3>' }); Vue.component('PostList', { data() { return { title: 'Vue.js无难事' } }, // 在字符串模板中可以直接使用PascalCase命名的组件名 // 和camelCase命名的prop名 template: '<div><PostItem :postTitle="title"></PostItem></div>' }); new Vue({ el: '#app' }) </script> </body> </html>
注:
- 在字符串模板中,不必必须使用kebab-case命名法(短横线分割命名),各种命名可以直接使用。
- 与普通的HTML元素的属性传值一样,要想接收动态值,需要使用v-bind指令,否则,接收的值都是静态的字符串值
传递多个数值
如果组件需要接收多个传值,那么可以定义多个prop:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="vue.js"></script> </head> <body> <div id="app"> <post-list></post-list> </div> <script> Vue.component('PostItem', { props: ['author','title','content'], template: ` <div> <h3>{{ title }}</h3> <p> 作者:{{ author }}</p> <p>{{ content }}</p> </div>` }); Vue.component('PostList', { data() { return { author: '孙鑫', title: 'Vue.js无难事', content: '这本书不错' } }, template: `<div><PostItem :author="author" :title="title" :content="content"> </PostItem></div>` }); new Vue({ el: '#app' }) </script> </body> </html>
通过对象传值
如果需要传入的属性较多,也可以封装一个对象来传值。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="vue.js"></script> </head> <body> <div id="app"> <post-list></post-list> </div> <script> Vue.component('PostItem', { props: ['post'], template: ` <div> <h3>{{ post.title }}</h3> <p> 作者:{{ post.author }}</p> <p>{{ post.content }}</p> </div>` }); Vue.component('PostList', { data() { return { post: { author: '孙鑫', title: 'Vue.js无难事', content: '这本书不错' } } }, template: '<div><PostItem :post="post"/></div>' }); new Vue({ el: '#app' }) </script> </body> </html>