自救的第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,
}
})