Vue基础语法（三）局部组件和全局组件

组件

''' 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 <div> localTag localtag2 } }); </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>