基本示例
// 声明一个组件
Vue.component('button-counter', {
// 调用组件的标签名
data: function () {
return {
count: 0
} // ==== data:{ count:0 }
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
// 组件模型
})可以重复调用，各自的count都是独立的变量
组件的参数
调用组件是采用标签属性的方式进行参数传值
<body>
<!-- 参数 -->
<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>
<script>
Vue.component('blog-post', {
props: ['title'], // 调用参数
template: '<h3>{{ title }}</h3>' // 调用参数
})
</script>
</body>
在组件上使用 v-model
638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
