Vue中的组件

1.什么是组件?

  • 组件的理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image…..)

下面用两张图片来对比传统编码和组件编码

image
image

2.Vue中组件分为非单文件组件和单文件组件

  • 1.非单文件组件(一般不常用)：
    • 1.模板编写没有提示
    • 2.没有构建过程, 无法将ES6 转换成ES5
    • 3.不支持组件的CSS
    • 4.真正开发中几乎不用
  • 2.单文件组件：

    • 1. 模板页面

      <template> 
      页面模板
      </template>

    • 2. JS 模块对象

      <script> 
        export default {
          data() {return {}}, 
          methods: {},
          computed: {},
          components: {}
      }
      </script>

    • 3. 样式

      <style> 
      样式定义
      </style>

3.Vue中组件的基本使用（展示非单文件组件，用于学习）

1.Vue中使用组件的三大步骤：

  • 一、定义组件(创建组件)
  • 二、注册组件
  • 三、使用组件(写组件标签)
    • 一、如何定义一个组件？
      • 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
        • 区别如下：
          • 1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
          • 2.data必须写成函数形式，为什么？ ———— 避免组件被复用时，数据存在引用关系。
        • 备注：使用template可以配置组件结构。
    • 二、如何注册组件？
      • 1.局部注册：靠new Vue的时候传入components选项
      • 2.全局注册：靠Vue.component(‘组件名’,组件)
    • 三、编写组件标签： 
      <!-- <组件名></组件名> -->
      <!-- 例如:组件名为:school -->
      <school></school>

代码解析:

<body>
    <div id="root">
        <h2>你好!{{name}}</h2>
        <!-- 步骤三:使用组件标签调用组件 -->
        <!-- 学校信息(组件) -->
        <school></school>
        <hr>
        <!-- 学生信息(组件) -->
        <student></student>
        <student1></student1>

        <!-- 全局组件 -->
        <hi></hi>
    </div>
</body>

<script type="text/javascript">
    // 注册全局组件
        // 1.先正常创建组件
        const hi = Vue.extend({
            template:`
                <div>
                    <h2>这是一个{{name}}</h2>    
                </div>
            `,
            data() {
                return {
                    name : '全局组件'
                }
            },
        })

    // 使用组件步骤一:创建组件
    // 创建学校组件
    const school = Vue.extend({
        // 给组件添加html片段(结构)
        // 可以给组件添加交互(后面的点击事件)
        template : `
            <div class="demo">
                <h2>学校名称：{{name}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showName">点我提示学校名</button>  
            </div>
        `,
        // el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
        // 数据存放与vm基本一致,methods,computed等也是如此            
        data() {
            return {
                name : '五邑大学',
                address : '江门'
            }
        },
        methods: {
            showName(){
                alert(this.name)
            }
        },
    })

    // 使用组件步骤一:创建组件
    // 创建学生组件
    const student = Vue.extend({
        template:`
            <div>
                <h2>学生姓名：{{name}}</h2>
                <h2>学生年龄：{{age}}</h2>    
            </div>
        `,

        data() {
            return {
                name : '张三',
                age : 20
            }
        },
    })

    // 实例化Vue
    new Vue({
        el:'#root',
        data() {
            return {
                name : 'Vue'
            }
        },
        // 步骤二:注册组件(局部注册)
        components:{
            // 完整写法:(组件名 : 你在外面声明的组件名)
            school : school,

            // 简写形式(同名的话)
            student,
            // 这里调用同一个组件(student)完成复用,但是两个组件之间并不相互影响
            student1 : student,

            // 全局组件的调用
            hi
        }
    })
</script>

运行结果展示:

image

2.注意事项:

  • 1.关于组件名:
    • 一个单词组成：
      • 第一种写法(首字母小写)：school
      • 第二种写法(首字母大写)：School
    • 多个单词组成：
      • 第一种写法(kebab-case命名)：my-school
      • 第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
    • 备注：
      • (1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
      • (2).可以使用name配置项指定组件在开发者工具中呈现的名字。
  • 2.关于组件标签:
    • 第一种写法：
    • 第二种写法：
    • 备注：不用使用脚手架时，会导致后续组件不能渲染。
  • 3.一个简写方式：
    • const school = Vue.extend(options) 可简写为：const school = options

3.定义组件的简写形式以及组件名称属性的设置：

//定义组件(简写形式)
const s = {
    name:'wyu',//给组件设置一个名字,会在Vue开发者工具中显示
    template:`
        <div>
            <h2>学校名称：{{name}}</h2>  
            <h2>学校地址：{{address}}</h2>   
        </div>
    `,
    data(){
        return {
            name:'五邑大学',
            address:'江门'
        }
    }
}

运行结果展示:

image