“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>
