0
点赞
收藏
分享

微信扫一扫

(9)vue 组件

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.父子组件通讯

 



举报

相关推荐

0 条评论