vue基础--组件的基本使用

全局组件

语法

第一个参数：表示组件的名称
第二个参数：表示组件的配置对象
Vue.component('组件的名称', {
template:``, // 模板

//在组件中也是通过data属性来提供数据的,，但是，组件中要求data的值必须是一个函数，使用 函数的返回值（对象），来作为数据
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'
}
}
}
}
})