组件——组件名、非单文件组件、单文件组件

组件——组件名、非单文件组件、单文件组件
目录

总结

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

   如何定义一个组件？

    如何注册组件

   关于组件标签

     关于组件名

   一个简写方式：

一、非单文件组件（开发几乎不用）

1.局部

2.全局

二、组件的嵌套

三、关于VueComponet

四、重要的内置关系

五、单文件组件

总结

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

          1.定义组件（创建组件）

          2.注册组件

          3.使用组件（写组件标签）

     如何定义一个组件？

            使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有差别

          区别：

               1.el不写 ---- 最终所有的组件都要经过一个vm管理，由vm中的el决定服务哪个容器

               2.data必须写成函数 -----避免组件被复用时，数据存在引用关系（比如a，b同时用了data数据，a改了数据，那b得到的数据就是a改了之后的数据）



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

    如何注册组件

        1.局部注册：靠new Vue的时候传入components选项

        2.全局注册：靠Vue.component('组件名',组件)



   关于组件标签

          第一种写法：

          第二种写法：

     备注：

         不适用脚手架时，会导致后续组建不能渲染

     关于组件名

       一个单词组成：

                 第一种写法（首字母小写）：school

                 第二种写法（首字母大写）：School

      多个单词组成：

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

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

       备注：

                 组件名尽可能回避HTML中已有的元素名称，例如：h2,H2都不可以

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

   一个简写方式：

            const school = Vue.extend(options)   简写：const school = options

           这种简写方式，表面没有调用Vue.extend ，但是最终还是被调用了



一、非单文件组件（开发几乎不用）

一个文件中包含n个组件

1.局部
```
html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 初识vuetitle>
        
        <script type="text/javascript" src="../js/vue.js">script> 
    head>
    <body>
        <div id="root">
        
        <school>school>
          <br><br>
        <student>student>
        div>
 
    body>
    
    <script type="text/javascript">
        //阻止vue在启动时生成生产提示
        Vue.config.productionTip=false
        
        // 创建school组件
        const school = Vue.extend({
            // 用div包裹，但是这个div最终不会出现在页面上
            template:`
                   学校名称：{{schoolName}}
                   学校地址：{{address}}
                   
                     
 `
```
,
// el:'#root', 如果存在此语句的话，也会报错
// 如果data写成这种形式会报错，只能写成函数的形式
// data:{
// schoolName:'尚硅谷',
// address:'北京昌平',
// },
data(){
return{
schoolName:'尚硅谷',
address:'北京昌平',
}
},
methods: {
showName(){
alert(this.schoolName)
}
},
})
// 创建student组件
const student = Vue.extend({
template:`
学生姓名：{{studentName}}
学生年龄：{{age}}
`

,

data(){

return{

studentName:'张三',

age:18

}

})

new Vue({

el:'#root',

// 这个地方依然可以写数据，依然可以用

data:{

},

// 注册组件（局部注册

components:{

// 这个地方是key：value的形式 value就是我们上面定时的const

// school:school,

// student:student

// 下面是简写

school,

student

}

})

script>

html>

2.全局

我们只需要下面这么注册即可，第一个参数是我们为组件起的名字，第二个参数就是我们const命名的名字，还是类似局部的key，value形式，将其对应起来

二、组件的嵌套


html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 初识vuetitle>
        
        <script type="text/javascript" src="../js/vue.js">script> 
    head>
    <body>
        <div id="root">
             <app>app>
        div>
 
    body>
    
    <script type="text/javascript">
        //阻止vue在启动时生成生产提示
        Vue.config.productionTip=false
 
        // 创建student组件
        const student = Vue.extend({
            template:`<div>
                         <h2>学生姓名：{{studentName}}h2>
                         <h2>学生年龄：{{age}}h2>
                      div> `
            ,
            data(){
              return{
                studentName:'张三',
                age:18
              }
            }
        })
 
        // 创建school组件
        const school = Vue.extend({
            // 用div包裹，但是这个div最终不会出现在页面上
            template:`<div>
                   <h2>学校名称：{{schoolName}}h2>
                   <h2>学校地址：{{address}}h2>
                   <student>student>
                     div> `
            ,
            data(){
                
                return{
                 schoolName:'尚硅谷',
                 address:'北京昌平',
                }
            },
            components:{
                // 注意！这里嵌套的时候有一个先后关系，一定要先创建student组件
                student
            }
        })
 
        // 创建hello组件
        const hello =Vue.extend({
            template:`<h1>{{msg}}h1>`,
            data(){
                return {
                    msg:'欢迎来到尚硅谷学习'
                }
            }
        })
 
        // 创建app组件  其他的组件都在这个地方
        // 一人之下，万人之上（在vm下）
        const app = Vue.extend({
            template:  `
                        <div>
                             <hello>hello>
                             <school>school>
                         div>    `
 
            ,
            components:{
                school,
                hello,
            }
        })
 
 
        new Vue({
            el:'#root',
            components:{
               app
            }
 
        })
 
    script>   
html>

三、关于VueComponet

1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的

2.我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent（options）

3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！

下面两个组件 school的vc和hello的vc是两vc，只不过长得一模一样

4.关于this的指向

组件配置中：

data函数、methods中的函数、watch中的函数、computed中的函数，this指向的均是vc实例对象

new Vue（）配置中

data函数、methods中的函数、watch中的函数、computed中的函数，this指向均是vm实例对象

vc和vm 的功能是一个样子的，也有数据代理

5.VueComponent的实例对象，以后简称vc，也可称为组件实例对象

Vue的实例对象，以后简称vm

四、重要的内置关系

内置关系：VueComponent.prototype._proto_ === Vue.prototype

五、单文件组件

直接看脚手架

总结

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

如何定义一个组件？

如何注册组件

关于组件标签

关于组件名

一个简写方式：

一、非单文件组件（开发几乎不用）

1.局部

学校名称：{{schoolName}}

学校地址：{{address}}

学生姓名：{{studentName}}

学生年龄：{{age}}

2.全局

二、组件的嵌套

三、关于VueComponet

四、重要的内置关系

五、单文件组件