探索学习 Vue 组件篇 第二篇 组件类型：非单文件组件

探索学习 Vue 组件篇

Vue 官网： https://cn.vuejs.org/v2/guide/forms.html
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 https://www.bilibili.com/

第二篇 组件类型：非单文件组件

细节点

• js函数式

    <script>
          function data(){
              return {
                  name: '小毛'
                  age: 18
              }
          }
          const x1 = data();
          const x2 = data(); // 每一次调用都是全新的对象，所以x1 x2 即使分别赋值之间也不会有相互的影响；
      </script>
  

• template 模板
  1. 一旦使用了template 必须定义根元素，所有的节点只能写到根节点下面；
  2. template 中最好使用 模板字符串来定义: ``

1. 组件分类

• 组件分类：有两种类型，如下
  • 非单文件组件： 一个文件中包含有n 个组件
  • 单文件组件： 一个文件中只包含一个组件
• 这一小节主要来先说非单文件组件

2. 组件的创建

2.1 学校组件

• 创建组件必须先了解,认识 Vue.extend()
• 直接上代码，先来一个学校组件练练手

      <div id="root">
          <h1>你好,{{name}}</h1>
          <hr/>
          <!-- 编写组件标签-->
          <school> </school>
          <hr>
      </div>
    <script type="text/javascript">
       Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
       // 创建schoole 组件 : 组件中必须有数据，同时必须有数据结构(页面)
       const school = Vue.extend({
          // 一旦使用了template 必须定义根元素，所有的节点只能写到根节点下面； 
          //template  中最好使用 模板字符串来定义:  ``
          // 组件数据结构
          template: `  
              <div>
                  <h2>学校名称：{{schoolName}}</h2>
                  <h2>学校地址：{{schoolAddress}}</h2>
                  <button @click="showSchoolName"> 点我提示学校名</button>
              </div>
          `,
          // 组件数据 data
          data:function() {
              return {
                  name: "安锐捷",
                  schoolName: '天津安锐捷大学',
                  schoolAddress: '普天科技园',
              }
          },
          methods: {
              showSchoolName(){
                  alert(this.schoolName)
              }
          },
       })
      new Vue({
          el: "#root",
          data: {
             name: "安锐捷",
          },
          // 注册组件
          components:{  // 配置的key 、 value  key 指组件名称
              school: school
          }
        })
    </script>
  

  示例图：
  

2.2 学生组件

• 有了学校组件的学习，学生组件就简单多了，记住一定要自己多手动敲一下代码，别复制哦，先定义组件，然后注册组件 ，最后页面写组件标签

  <div id="root">
          <h1>你好,{{name}}</h1>
          <hr/>
          <!-- 编写组件标签-->
          <school> </school>
          <hr>
          <!-- 编写组件标签-->
          <student></student>
          <!--一个组件使用多次，他们之间是相关不会干扰的 通过VueTool 修改组件值可以观察-->
          <student> </student>
      </div>
    <script type="text/javascript">
       Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
       // 创建schoole 组件 : 组件中必须有数据，同时必须有数据结构(页面)
       const school = Vue.extend({
          // 组件数据结构
          template: `  
              <div>
                  <h2>学校名称：{{schoolName}}</h2>
                  <h2>学校地址：{{schoolAddress}}</h2>
                  <button @click="showSchoolName"> 点我提示学校名</button>
              </div>
          `,
          // 组件数据 data
          data:function() {
              return {
                  name: "安锐捷",
                  schoolName: '天津安锐捷大学',
                  schoolAddress: '普天科技园',
              }
          },
          methods: {
              showSchoolName(){
                  alert(this.schoolName)
              }
          },
       })
       //第一步，创建学生组件
       const student = Vue.extend({
          template: `
          <div>
              <h2>学生姓名：{{studentName}}</h2>
              <h2>学生年龄：{{age}}</h2>
          </div>            
          `,
          data: function(){
              return {
                  studentName: '阿毛',
                  age: 18
              }
          }
       })
       new Vue({
          el: "#root",
          data: {
             name: "安锐捷",
          },
          // 注册组件
          components:{  // 配置的key 、 value  key 指组件名称，组件名称指的是标签引用的名称 value 创建时候的变量名称
              school: school,
              student: student,
          }
        })
    </script>
  

  示例效果
  

3. 全局组件的创建

• 思考一个问题：如果一个页面上有多个div中使用，怎么可以更方便的使用组件呢？那就是全局组件，先创建一个组件，然后注册为全局的，就可以在不同的div中直接使用了，不需要到处的注册
• 直接上代码

<div id="root">
        <h1>你好,{{name}}</h1>
        <hr/>
        <!-- 编写组件标签-->
        <school> </school>
        <hello></hello>
        <hr>
        <!-- 编写组件标签-->
        <student></student>
        <!--一个组件使用多次，他们之间是相关不会干扰的 通过VueTool 修改组件值可以观察-->
        <student></student>
    </div>
    <div id="root2">
        <hello></hello>
    </div>
  <script type="text/javascript">
     Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
     // 创建schoole 组件 : 组件中必须有数据，同时必须有数据结构(页面)
     const school = Vue.extend({
        // 一旦使用了template 必须定义根元素，所有的节点只能写到根节点下面； 
        //template  中最好使用 模板字符串来定义:  ``
        // 组件数据结构
        template: `  
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{schoolAddress}}</h2>
                <button @click="showSchoolName"> 点我提示学校名</button>
            </div>
        `,
        // 组件数据 data
        data:function() {
            return {
                name: "安锐捷",
                schoolName: '天津安锐捷大学',
                schoolAddress: '普天科技园',
            }
        },
        methods: {
            showSchoolName(){
                alert(this.schoolName)
            }
        },
     })
     //第一步，创建学生组件
     const student = Vue.extend({
        template: `
        <div>
            <h2>学生姓名：{{studentName}}</h2>
            <h2>学生年龄：{{age}}</h2>
        </div>            
        `,
        data: function(){
            return {
                studentName: '阿毛',
                age: 18
            }
        }
     })
     //第一步： 创建Hello组件 
     const hello = Vue.extend({
        template:`
            <div>
                <h2>你好啊，{{name}}</h2>
            </div>    
        `,
        data: function(){
            return {
                name: '全局组件'
            }
        }
     })
     // 第二步： 注册为全局组件
     Vue.component('hello',hello)
     new Vue({
        el: "#root",
        data: {
           name: "安锐捷",
        },
        // 注册组件
        components:{  // 配置的key 、 value  key 指组件名称
            school: school,
            student: student,
        }
      })
      //定义容器2
      new Vue({
        el: '#root2'
      })
  </script>

示例图

4. 总结 Vue 中 使用组件的三大步骤

4.1. (定义组件)创建组件

• 如何定义一个组件 ？
  • 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但区别如下
  1. el 不要写，为什么？ 因为最终所有的组件都要经过一个vm 的管理，由vm中的el决定服务于哪个容器；
  2. data 必须写成函数式，为什么？ 避免组件被复用时，数据存在引用关系；
  • 备注： 使用template 可以配置组件结构

4.2. 注册组件

• 如何注册组件
  1. 局部注册： 靠new vue 的时候传入 components 选项；
  2. 全局注册： 靠vue.component('组件名',组件)

4.3. 使用组件，编写组件标签

• 编写组件标签
  <school><school>

创作不易，欢迎 多多点赞，收藏 各节里面总结的还有不到位的欢迎指证
邮箱：pymxb1991@163.com
微信：py_mxb

竹密岂妨流水过，山高怎阻野云飞！ — 宋·释道原《景德传灯录》。