1.基础
(1)最基本的组件
<div id="components-v">
<redBtn></redBtn>
</div>
<script>
Vue.component('redbtn', {
template: '<button style="background-color:red;width:100px;height:20px">红色按钮</button>'
}
)
new Vue({
el: '#components-v'
})
</script>
(2)
<div id="components-demo">
<button-counter></button-counter>
</div>
<script>
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
new Vue({
el: '#components-demo'
})
</script>
data 必须是一个函数
先注册,才能在vue中使用。例如这个例子中如果把new vue 放到定义模板代码的上方,页面将不会显示。
2.组件命名
组件名称如果使用的是驼峰法命名 redBtn,则自定义元素使用时要写成 <red-btn></red-btn>
建议还是自定义元素和组件名称都写成 red-btn的方式
2.注册局部组件
new Vue({
el: '#components-v',
components: {
redbtn: {
template: '<button style="background-color:red;width:100px;height:20px">红色按钮</button>'
}
}
})
3.传递数据
使用props传递参数
<div id="components-v">
<redBtn btntext="红色按钮"></redBtn>
</div>
<script>
Vue.component('redbtn', {
props:['btntext'],
template: '<button style="background-color:red;width:100px;height:20px">{{btntext}}</button>'
}
)
new Vue({
el: '#components-v'
})
</script>
3.父子组件
5.父子组件通讯