传入一个对象
<!-- 即便对象是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post
v-bind:author="{
name: 'Veronica',
company: 'Veridian Dynamics'
}"
></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>传入一个对象</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="hzh">
<hzh-component v-bind:author="{
name: '黄子涵',
brother: '黄春钦',
mother: '陈兰英'
}"></hzh-component>
</div>
<script>
Vue.component('hzh-component', {
props: ['author'],
template: `
<div class="hzh-component">
<h3>作者的名字：{{author.name}}</h3>
<h3>作者的弟弟：{{author.brother}}</h3>
<h3>作者的妈妈：{{author.mother}}</h3>
</div>
`
})
new Vue({
el: '#hzh',
})
</script>
</body>
注意
上面那段代码中的template: 后面的符号是反单引号，而不是单引号。它们在键盘上的位置如下：
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:author="post.author"></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>传入一个对象</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:post="post"
></hzh-component>
</div>
<script>
Vue.component('hzh-component', {
props: ['post'],
template: `
<div class="hzh-component">
<h3>作者的名字：{{post.author.name}}</h3>
<h3>作者的弟弟：{{post.author.brother}}</h3>
<h3>作者的妈妈：{{post.author.mother}}</h3>
</div>
`
})
new Vue({
el: '#hzh',
data: {
posts: [
{ key: 1,
author: {
name: '黄子涵',
brother: '黄春钦',
mother: '陈兰英'
}
}
]
}
})
</script>
</body>
