1,prop的大小写
HTML 中的 attribute 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名
2,传递prop
传入一个静态的值
<body>
<div id="example">
<blog-post title="my name is ddd"></blog-post>
</div>
<script>
// 注册
Vue.component('blog-post', {
props:["title"],
template:'<h3>{{ title }}</h3>'
})
// 创建根实例
new Vue({
el: '#example'
})
</script>
</body>
2,传入一个对象的所有属性
<body>
<div id="example">
<div :style="{fontSize:postFontSize+'em'}">
<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"
v-on:enlarge-text="postFontSize +=$event">
</blog-post>
</div>
</div>
<script>
// 注册
Vue.component('blog-post', {
props: ["post"],
template: `
<div class="blog-post">
<h3>{{ post.id }}</h3>
<h3>{{ post.title }}</h3>
<button v-on:click="$emit('enlarge-text',0.1)">Enlarge text</button>
<div v-html="post.content"></div>
</div>
`
})
// 创建根实例
new Vue({
el: '#example',
data: {
posts: [
{ id: 1, title: 'aaaaaaaaaaaa' ,content:'mjhdurfbhvbdsjdnc' },
{ id: 2, title: 'bbbbbbbbbbbb',content:'mjhdurfbhvbdsjdnc' },
{ id: 3, title: 'cccccccccccc' ,content:'mjhdurfbhvbdsjdnc'},
],
postFontSize:2
}
})
</script>
</body>