组件
'''
1.根组件：new Vue()创建的组件，一般不明确自身的模板，模板就采用挂载点
2.局部组件: local_component = {}
2.全局组件： Vue.component({})
'''
'''
1.一个组件就是一个vue实例
2.组件具有自身的template
3.组件的模板只能有一个根标签
4.子组件的data具有作用域，以达到组件的复用，每个组件的数据独有
'''
变量什么的关键字
'''
没有关键字：全局作用域
var：没有块级，有局部作用域
let：有块级，有局部作用域
const：有块级，有局部作用域，是常量
'''
局部组件
第三步
<div id="app">
<!--html代码不区分大小写，该名字使用子组件是不合法的命名-->
<!--<localTag></localTag>-->
<!--<local></local>-->
<!--组件的复用-->
<local-tag></local-tag>
<local-tag></local-tag>
</div>
<script>
第一步
var localTag = {
template: '<div class="local" style="color: orange" @click="btnAction">{{ name }}组件</div>',
// 子组件的数据与方法由子组件自身提供
data: function () {
return {
name: '局部'
}
},
methods: {
btnAction: function () {
alert('你丫点我了')
}
}
};
第二步
new Vue({
el: "#app",
components: {
// local: localTag
// 'local-tag':localTag
// localTag: localTag,
// 1.js的驼峰命名(localTag)对应的是html的连接命名(local-tag)
// 2.key与value的变量名一致，可以简写
localTag
}
});
</script>
全局组件
<div id="app">
<global-tag></global-tag>
<global-tag></global-tag>
</div>
<script>
Vue.component('global-tag', {
template: '<div @click="btnClick">{{ name }}组件被点了{{ n }}下</div>',
// 组件被复用一次，就会产生一个新的局部作用域，使用一套数据
data: function(){
return {
n: 0,
name: "全局"
}
},
methods: {
btnClick: function () {
this.n += 1
}
}
});
new Vue({
el: "#app"
})
</script>