本文介绍了Vue.js中的基本组件概念，包括组件命名规则（kebab-case），如何使用props传递属性，插槽功能的应用以及组件数据管理与事件监听。还区分了全局组件和局部组件的注册方法。
自救的第9天，时间怎么这么快，感觉学的很着急还是赶不上。不过破釜沉舟，加油吧
Component()
Vue.component('greeting', {
template: '<p>hello!</p>'
})
HTML四个组成部分
- 名称：命名方式：kebab-case
- 属性：可以通过props属性增加一个“to”属性
Vue.component('greeting', {
props: ['to'],
template: '<p>hello!{{to}}</p>'
})
<greeting to="Mike"></greeting>
<greeting to="jelly"></greeting>
- 内容
插槽slot
Vue.component('greeting', {
props: ['to'],
template: '<p><slot></slot>{{to}}</p>'
})
<greeting to="Mike">Happy new year!</greeting>
<greeting to="jelly">Happy birthday!</greeting>
- 事件处理
组件的data必须通过函数返回值方式定义
Vue.component('greeting', {
data: function () {
return {
count: 0
}
},
props: ['to'],
template: '<button v-on:click="count++"><slot></slot>{{to}}x{{count}}</button>'
})
一个组件只能有一个根节点
全局组件：
// 自动注册为全局组件
Vue.component('greeting', {
data: function () {
return {
count: 0
}
},
局部组件：
//注册为局部组件
let greetingComponent = {
data: function () {
return {
count: 0
}
},
还需要在vue实例中添加component
let vm = new Vue({
el: "#app",
methods: {
onClick: function (count) {
alert("已经点赞了" + count + "次");
}
},
component: {
greeting: greetingComponenet,
}
})
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
