传递静态或动态 Prop
像这样，你已经知道了可以像这样给 prop 传入一个静态的值：
<blog-post title="My journey with Vue"></blog-post>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>传递静态或动态 Prop</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="hzh">
<hzh-component title="黄子涵"></hzh-component>
</div>
<script>
Vue.component('hzh-component', {
props: ['title'],
template: '<h3>{{title}}</h3>'
})
new Vue({
el: '#hzh',
})
</script>
</body>
你也知道 prop 可以通过
v-bind动态赋值，例如：
<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>传递静态或动态 Prop</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="hzh">
<hzh-component v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title"></hzh-component>
</div>
<script>
Vue.component('hzh-component', {
props: ['title'],
template: '<h3>{{title}}</h3>'
})
new Vue({
el: '#hzh',
data: {
posts: [
{ id: 1, title: '黄子涵' }
]
}
})
</script>
</body>
<!-- 动态赋予一个复杂表达式的值 -->
<blog-post
v-bind:title="post.title + ' by ' + post.author.name"
></blog-post>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>传递静态或动态 Prop</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="hzh">
<hzh-component v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title + '由' + post.author.name + '创作'"></hzh-component>
</div>
<script>
Vue.component('hzh-component', {
props: ['title'],
template: '<h3>{{title}}</h3>'
})
new Vue({
el: '#hzh',
data: {
posts: [
{ id: 1, title: '《黄子涵是帅哥！》', author: {name: '黄子涵'}}
]
}
})
</script>
</body>
在上述两个示例中，我们传入的值都是字符串类型的，但实际上任何 类型的值都可以传给一个 prop。
