【Vue】第八部分 组件

【Vue】第八部分 组件

---

---

8.组件（重要）

8.1 非单文件组件

8.1.1 使用组件的三大步骤

• 创建组件
• 注册组件（components）
• 使用组件标签

8.1.2 怎么创建一个组件？

1. 使用vue.extend({option}) option:配置项

2. 该配置项和new Vue(option)时传入的配置项类似,需要注意的是：

   （1）不要写el，因为所有的组件最终都由一个vm所管理，由vm中的el去决定要服务哪个容器

   （2）data必须要写成函数的形式，避免组件被复用的时候数据存在引用关系

3. 在这个阶段创建组件使用的名字只是一个中转变量并不是最终组件的名字

4. template(模板)可以去配置组件的结构，但是需要注意的一点是：只能有一个根元素

5. 配置项name：在这里设置的名字是会在Vue控制台上显示

8.1.3 如何去注册组件？

局部注册：new Vue({ components:{组件名} })

全局注册：Vue.component('组件名'，组件)

8.1.4 非单文件的小案例

html代码

 //准备好一个容器
<div id="root">
         //使用组件标签
        <school></school>
        <hr>
        <student></student>
</div>

js代码

    <script>
        Vue.config.productionTip = false  //阻止默认行为

        // 第一步 创建school组件
				// 这时组件名还没定下来这个school是个中转变量
       const school = Vue.extend({
         		name：'School',
            template:` 
                <div>
                    <h2>{{schoolname}}</h2>
                    <h2>{{address}}</h2>
                    <button @click="showName">点我提示学校名											</button>	
                </div>
            `,
            data(){  //记得返回，不然看不见
                return{
                    schoolname:"尚硅谷",
                    address:"北京"
                }
            },
          	methods:{
                showName(){
                    alert(this.schoolname);
                }
            }
       })

        // 第一步 创建student组件
        const student = Vue.extend({
            name：'Student'
            template:`
                <div>
                    <h3>{{name}}</h3>
                    <h3>{{age}}</h3>
                    <h3>{{gender}}</h3>
                </div>
            `,
            data(){
                return{
                    name:"Jack",
                    gender:"male",
                    age:"18"
                }
            }
        })   

    //第二步 全局注册组件，这个时候设置的组件名字就是最终的组件名
    Vue.component('school',school)

        let vm = new Vue({
            el: '#root',
            data: {
                
            },
            /*
                第二步 局部注册组件
                这个时候设置的组件名字就是最终的组件名
             */
            components:{
              	// 设置组件名：创建的那个组件
                // school:school,
                // student:student,
                //简写
                school,
                student      
            }
        })
    </script>
   

8.1.5 关于组件名和组件标签的注意点

组件名：

一个单词组成

• 第一种写法（首字母小写）：school
• 第二种写法（首字母大写）：School

多个单词组成

• 第一种写法（kebab-case命名）：my-school

• 第二种写法（CamelCase命名）：MySchool（需要Vue脚手架支持）

关于组件标签：

• 第一种写法：<school></school>

• 第二种写法：<school/> (需要有脚手架)

  
  

8.1.6 组件嵌套

<div id="root">

    </div>
    <script>
        Vue.config.productionTip = false
        /* 
        需求：
            创建一个组件app去管理所有的组件，Vue去管理app
            创建一个school组件，student组件作为它的子组件

            自我理解：
            - 想要在哪个组件的嵌套下就在哪个组件下注册,并且注册完的
            要使用的标签也写在该模板写
            - 层次越低的组件要写在最上面否则下面的父组件看不到
        */

        // 创建一个student组件   
        const student = Vue.extend({
            template: `
                <div>
                    <h3>学生姓名: {{studentname}}</h3>
                    <h3>学生年龄: {{age}}</h3>
                    <h3>性别: {{gender}}</h3>
                </div>
           `,
            data() {
                return {
                    studentname: "李明",
                    age: 18,
                    gender: "男"
                }
            }
        })

        // 创建一个school组件
        const school = Vue.extend({
            template: `
                <div>
                    <h3>学校名称: {{schoolname}}</h3>
                    <h3>学校地址: {{address}}</h3>
                    <student></student> //使用student组件
                </div>
           `,
            data() {
                return {
                    schoolname: "尚硅谷",
                    address: "北京"
                }
            },
            // 注册了student组件
            components: {
                student: student
            }
        })

        //创建一个app组件
        const app = Vue.extend({
            template: `
                <school></school> //使用school组件
           `,
            // 注册school组件    
            components: {
                school: school
            }
        })

        let vm = new Vue({
            el: '#root',
            data: {

            },
            template: `<app></app>`, //使用app组件
            // 注册app组件
            components: {
                app: app
            }
        })
    </script>

8.1.7 VueComponent（vc）

1. 例如上面的例子：school组件其实本质是一个VueComponent的构造函数，并且它不是由我们程序员自己去定义的，而是Vue.extend的时候生成的。所以Vue.extend的返回值是VueComponent

2. 当我们使用组件标签的时候，<school></school>，被Vue解析到时，会帮我们去创建school组件的实例化对象，相当于给我们new了一个，即new VueComponent(option)，只有使用的时候才会new

3. 关于this的指向

   （1）组件配置项中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是VueComponent实例对象也就是所谓的vc
   
   

8.1.8 一个非常重要的内置关系（重要）

vueComponent.prototype._proto_ === Vue.prototype

目的：这样组件实例对象vc就可以访问到Vue原型上的属性和方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nhszoMIi-1645782679915)(C:\Users\hp\Desktop\Note\图片\内置关系.png)]

 <div id="root">
        <school></school>
    </div>

    <script>
        Vue.config.productionTip = false   //阻止vue在生成时自动产生提示
        const school = Vue.extend({
            template:`
                <div>
                    <h2>{{school}}</h2>
                    <button @click="showx">点击我看看我能不能找到x</button>
                </div>
            `,
            data(){
                return {
                    school:"尚硅谷"
                }
            },
            methods: {
                showx(){
                    console.log(this.x)  //99
                }
            },
          
        })

       
        let vm = new Vue({
            el: '#root',
            data: {
            },
          template:`
          	<school></school>
          `
            components:{
                school:school
            }
        })

        Vue.prototype.x = 99
        console.log(vm.x);  // 99

        console.log(school.prototype.__proto__ ===  Vue.prototype); //true
        console.log(school.prototype.__proto__ ===  vm.__proto__);  //true

    </script>

8.2 单文件组件

8.2.1 配置脚手架

第一步：（仅第一次执行）

全局安装npm install -g @Vue/cil

第二步：切换到需要创建项目的目录下执行该命令创建项目

vue.create xxxx

第三步：启动项目

npm run server

脚手架的结构示意图：

Vue.config.js配置文件

具体的配置项可以到去查看官网，下面就举个简单的例子：

module.exports = {
   lintOnSave:false  //关闭警告
}

8.2.2 单文件组件的组成部分（三部分）

1. 模板

<template>
  <div class="wrapper">
      <h2>欢迎来到{{name}}</h2>
      <h2>学校地址是{{address}}</h2>
      <button @click="showinfo">点击我显示学校的信息</button>
  </div>
</template>

2.脚本（编写js代码区域）

<script>
    export default {
        name:"school", //显示在Vue开发者工具上的组件名字
        data(){
            return{
                name:"尚硅谷",
                address:"北京"
            }
        },
        methods:{
            showinfo(){
                alert(this.name,this.address)
            }
        }   
    }
</script>

3.css样式

<style>
    .wrapper{
        background-color: antiquewhite;
    }
    .wrapper h2{
        color: brown;
    }
</style>

整体架构见下面代码：

//模板也就是html
<template>
  <div>
      <school></school>
  </div>
</template>

//js代码
<script>
import school from './school.vue'

export default {
    name:"app",
  	components: { school},

}
</script>

//样式也就是css
<style>

</style>

---

总结

以上就是今天要讲的内容，本文介绍了单文件组件和非单文件组件的使用方法，希望对大家有帮助！