全局组件
语法
第一个参数:表示组件的名称
第二个参数:表示组件的配置对象
Vue.component('组件的名称', {
template:``,
data:function(){ return [name:'jack'] },
methods: {},
directives: {},
filters: {},
computed: {},
watch: {}
})
组件模板配置项的配置方式
// 字符串形式(注意引号用Tab键上边的键)
template: `<div>
<h1>这是 Hello 组件</h1>
<p>你好我叫:{{ name }}</p>
<button @click="fn">变性</button>
</div>`
// 模板id
<script type="text/x-template" id="tpl">
<div>
<h1>这是 Hello 组件</h1>\
</div>
</script>
template: '#tpl'
局部组件
语法
components: {
组件名1:{},
组件名2:{}
}
注册局部组件
components: {
// 属性名表示组件名称
// 属性的值,表示组件的配置项
hello: {
template: `
<h1 @click="fn">这是一个大标题,很大 === {{msg}}</h1>
`,
data() {
return {
msg: '666'
}
},
methods: {
fn() {
this.msg = 'abc'
}
}
},
world: {
template: `
<h1>word wo de --- {{name}} {{age}} {{gender}}</h1>
`,
data() {
return {
name: '我的',
age: 19,
gender: 'male'
}
}
}
}
})