(三)组件化编程

(三)组件化编程

非单文件组件

基本使用

  • Vue中使用组件的三大步骤

  1. 定义组件(创建组件)
  2. 注册组件
  3. 使用组件(写组件标签)

  • 如何定义一个组件

使用Vue.extend(options)创建,其中options和new Vue时传入的那个options几乎一样,但区别如下:

  1. el不要写,为什么?—最终所有的组件都有经过一个vm的管理,由vm中的el决定服务哪个容器
  2. data必须写成函数,为什么?—避免组件被复用时,数组存在引用关系

备注:使用template可以配置组件结构

  • 如何注册一个组件

  1. 局部注册:靠new Vue中的时候传入components选项
  2. 全局注册:靠Vue.component('组件名',组件)

  • 编写组件标签

<school></school>

    <div id = "root">
  
        <student></student>
    </div>
​
    <script type="text/javascript">
​
        //创建组件
        const student = Vue.extend({
            //创建组件
            template:`
                <div>
                    <h2>学生的名字:{{name}}</h2>
                    <h2>学生的年龄:{{age}}</h2>
                </div>
            `,
            data(){
                return {
                    name:"张三",
                    age:15
                }
            }
        })
        const vm =  new Vue({
            el:'#root',
            //注册组件
            components:{
                //完整的写法:student:student
                student,
            }
        })
    </script>

几个注意点

  • 关于组件名:

  1. 一个单词组成:第一种写法(首字母小写):school;第二种写法(首字母大写):School
  2. 多个单词组成:第一种写法(kebab-case命名);第二种写法(CameCase命名):MySchool(需要脚手架支持)
  3. 备注:

组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行

可以使用name配置项指定组件在开发者工具中呈现的名字

  • 关于组件标签

  1. 第一种写法:<school></school>
  2. 第二种写法:<school/>
  3. 备注:不能使用脚手架时,第二种写法会导致后续组件不能渲染

  • 一个简写方式

const school = Vue.extend(options)
​
//可以简写
const school = options

组件的嵌套

  • 组件的嵌套,是在一个组件当中,注册另外一个组件,他们两者之间会形成一个父子关系

    <div id = "root">
    </div>
​
    <script type="text/javascript">
        const student = Vue.extend({
            template:`
                <div>
                    <h2>学生的名字是:{{name}}</h2>
                </div>
            `,
            data(){
                return {
                    name:"张三"
                }
            }
        })
​
        const school = Vue.extend({
            template:`
                <div>
                    <h2>学校名称:{{name}}</h2>
                    <student></student>
                </div>
            `,
            data(){
                return {
                    name:"四曲实验室"
                }
            },
            components:{student}
        })
        
        const app = Vue.extend({
            template:`
                <div>
                    <school></school>
                </div
            `,
            components:{school}
        })
​
        const vm =  new Vue({
            el:'#root',
            template:`
                <app></app>
            `,
            components:{app}
        })
    </script>

VueComponent构造函数

  • school组件本质是一个名为VueComponent的构造函数,切不是程序员定义的,是Vue.extend生成的。
  • 我们只需要写<school>或<school></scholl>,Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new Vuecomponend(options)
  • 关于this指向:

  1. 组件配置中:

data函数、methods中的函数、watch中的函数、computed中的函数,它们的this均是【VueComponent实例对象】

  1. new Vue(options)配置中

data函数、methods中的函数、watch中的函数、computed中的函数,他们的this指向都是【Vue实例对象】

  • VueComponent的实例对象,以后简称VC(也可称之为:组件实例对象)。Vue的实例对象,以后成为vm

一个重要的内置关系

  • 一个重要的内置关系:VueComponent.prototype.__proto__===Vue.prototype
  • 为什么要有这个关系:让组件实例对象(VC)能够访问到Vue原型上的属性、方法

单文件组件

APP.vue组件文件

<template>
    <div>
        <Schoool></Schoool>
    </div>
</template>
​
<script>
    import School from "./School"
​
    export default {
        name:"App",
        components:{
            School
        }
    }
</script>
​
<style>
​
</style>

School.vue组件文件

<template>
    <div>
        <h2>学校名称是:{{name}}</h2>
        <h2>学校的地址是:{{address}}</h2>
    </div>
</template>
​
<script>
export default {
    name:"School",
    data() {
        return {
            name:"四曲实验室",
            address:"贵州"
        }
    },
}
</script>
​
<style>
​
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
​
Vue.config.productionTip = false
​
new Vue({
  render: h => h(App),
}).$mount('#app')   

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
​

© 版权声明
THE END
喜欢就支持以下吧
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容