非单文件组件

 <div id="root">
    <!-- 组件名 -->
    <x></x>
    <!-- 可以复用 -->
    <x></x>
    <br>
    <student></student>
  </div>
  <script>
    //第一步：创建shool组件
    const shool = Vue.extend({
      // el:'#root',// 组件定义时，不用写el这个配置，因为最后它都被一个vm管理，由vm决定服务哪个容器
      template:`<div>
      <h1>名称：{{shoolName}}</h1>
      <h1>地址：{{addr}}</h1>
    </div>`,//一定只有一个根元素包裹，这是组件的HTML结构，用template配置
      data(){ //data有对象式和函数式，组件式必须要用函数式，不然报错
        return { //函数式是为了可以复用，每次都返回一全新的对象，被修改也不会影响到复用的对象
         shoolName:'小学',
         addr:'上海'
        }
      }
    })
    // 第一步：创建student组件
    const student = Vue.extend({
      template:`<div>
      <h1>姓名：{{studentName}}</h1>
      <h1 @click="年龄加1">年龄：{{age}}</h1>
      </div>`,
      data(){
        return {
          studentName:'高高',
          age:17
        }
      }
    })
    new Vue({
      el:'#root',//组件要服务的容器
      //局部定义组件
      components:{//一个键值的方式表示
        x:shool,//shool表示用的是哪个组件，但是在上面的HTML用的是x这个键名
       student//如果键名一致就用简写模式
      }
    })
  </script>

非单文件组件修改.PNG

• 修改其中一个不影响其它组件，因为这是data是函数式，每次返回的值不一样

全局定义组件

全局注册组件.PNG

• new Vue里面的components配置中没有配置good，用的是** Vue.component('good',good)**

  <div id="root">
    <!-- 组件名 -->
    <x></x>
    <!-- 可以复用 -->
    <x></x>
    <br>
    <student></student>
    <good></good>
  </div>
  <script>
    //第一步：创建shool组件
    const shool = Vue.extend({
      // el:'#root',// 组件定义时，不用写el这个配置，因为最后它都被一个vm管理，由vm决定服务哪个容器
      template:`<div>
      <h1>名称：{{shoolName}}</h1>
      <h1>地址：{{addr}}</h1>
    </div>`,//一定只有一个根元素包裹，这是组件的HTML结构，用template配置
      data(){ //data有对象式和函数式，组件式必须要用函数式，不然报错
        return { //函数式是为了可以复用，每次都返回一全新的对象，被修改也不会影响到复用的对象
         shoolName:'小学',
         addr:'上海'
        }
      }
    })
    // 第一步：创建student组件
    const student = Vue.extend({
      template:`<div>
      <h1>姓名：{{studentName}}</h1>
      <h1 @click="年龄加1">年龄：{{age}}</h1>
      </div>`,
      data(){
        return {
          studentName:'高高',
          age:17
        }
      }
    })
    // 第一步：创建good组件
    const good = Vue.extend({
      template:`<div>
        <h1>good</h1>
      </div>`,
    })
    Vue.component('good',good)//全局配置组件
    new Vue({
      el:'#root',//组件要服务的容器
      //局部定义组件
      components:{//一个键值的方式表示
        x:shool,//shool表示用的是哪个组件，但是在上面的HTML用的是x这个键名
       student//如果键名一致就用简写模式
      }
    })
  </script>