vue2-组件化编程

标签：school Vue 编程 vue2 address 组件 data options

模块:向外提供特定功能的js呈现
组件:用来实现局部(特定)功能效果的代码集合
模块化:当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用
组件化:当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用

编写组件-非单文件组件

非单文件组件:一个文件中包含有n个组件

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

定义组件(创建组件)
注册组件
使用组件(写组件标签)

定义组件

组件是可理解为可以复用的vm实例,使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，data、回调、计算、监听等等，除了el

区别:

el不要写：最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
data必须写成函数：避免组件被复用时，数据存在引用关系
使用template可以配置组件结构
其他的回调、监听等等都是配置在组件内部而非vue实例

    // 创建school组件
    const school = Vue.extend({
        // 组件里面模版内容
        template: `
          <div>
            <h1>{{ schoolName }}{{ address }}</h1>
          </div>
        `,
        data: function () {
            return {schoolName: "school", address: "Beijing"}

        }
    })

    // 创建student组件
    const student = Vue.extend({
        template: `
          <div>
            <h1>{{ name }}{{ address }}</h1>
          </div>
        `,
        data: function () {
            return {name: "student", address: "Beijing"}
        }
    })

// 简写形式 
// const school = Vue.extend(options) 可简写为：const school = options

// 创建组件-简写
const school = {
        // 组件里面模版内容
        template: `
          <div>
            <h1>{{ schoolName }}{{ address }}</h1>
          </div>
        `,
        data: function () {
            return {schoolName: "school", address: "Beijing"}

        }
    }

// 如果简写，vue源码会完成调用extend

注册组件

局部注册

 // 创建vm
    new Vue({
            el: "#root",
            data: {},
            // 注册组件-局部注册
            components: {
              // key:value形式，key为实际的组件名字，可以不和上面创建的名字一致
                school:school,
                student

            }
        }
    )

全局注册

    // 全局注册组件
    Vue.extend("student",student)

使用组件

<div id="root">
    <!-- 编写组件标签,标签为components里面的key -->
    <school></school>

    <student></student>

</div>

注意事项

1.关于组件名:
一个单词组成：
第一种写法(首字母小写)：school
第二种写法(首字母大写)：School

多个单词组成：
第一种写法(kebab-case命名)：my-school
第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
备注：
(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

2.关于组件标签:
第一种写法：
第二种写法：
备注：不用使用脚手架时，会导致后续组件不能渲染

组件嵌套

   // 创建student组件
    const student = Vue.extend({
        template: `
          <div>
            <h1>{{ name }}{{ address }}</h1>
          </div>
        `,
        data: function () {
            return {name: "student", address: "Beijing"}
        },

    })

    // 创建school组件
    const school = Vue.extend({
        template: `
          <div>
            <h1>{{ schoolName }}{{ address }}</h1>
            <!--            使用 student组件 -->
            <student></student>
          </div>
        `,
        data: function () {
            return {schoolName: "school", address: "Beijing"}

        },
        // 注册组件-将student注册给school组件，school的局部组件
        components:{
            student
        }
    })
    

    // 创建vm
    new Vue({
            el: "#root",
            data: {},
             components: {
                school:school,

            }
        }
    )

在vue中，vue可以只管理一个组件，由该组件管理其余组件


    // 创建app组件
    const app = {
        template: `
          <!--          app内调用 其余组件-->
          <div>
            <student></student>
            <school></school>
          </div>
        `,
        // 将其余组件注册给app
        components: {
            school,
            student
        }

    }


    // 创建vm
    new Vue({
            el: "#root",
            data: {},
            // 调用app组件
            template: `
              <app></app>`,
            components: {
                // 将app注册给 vue
                app

            }
        }
    )

VueComponent

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

    console.log(school) //  VueComponent(options) {this._init(options);}

只需要写或，Vue解析时帮我们创建school组件的实例对象,即Vue帮我们执行的：new VueComponent(options)

每次调用Vue.extend，返回的都是一个全新的VueComponent

  // extend部分源码 
	var Sub = function VueComponent (options) {
        this._init(options);
      };
    return Sub

组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数,它们的this均是VueComponent实例对象

  const school = Vue.extend({
        name:"school",
        template: `
          <div>
            <h1>{{ schoolName }}{{ address }}</h1>

          </div>
        `,
        data: function () {
            console.log(this)
            // VueComponent {_uid: 3, _isVue: true, __v_skip: true, _scope: EffectScope, $options: {…}, …}
            return {schoolName: "school", address: "Beijing"}

        },

    })

new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数,它们的this均是Vue实例对象
组件实例对象可以访问到Vue原型上的属性和方法
```
VueComponent.prototype.__proto__ === Vue.prototype  // true
```

编写组件-单文件组件

单文件组件:一个文件中只包含1个组件 ,文件后缀是以.vue结尾的

.vue文件模版

<script>
// 编写组件的交互逻辑、数据等等

</script>


<template>
  <!-- 编写组件的结构 html -->

</template>


<style scoped>
/* 编写组件的样式 */
</style>

编写组件

编写一个Student 单文件组件，将该组件暴露出去 Student.vue

<script>
// 创建组件-默认暴露
export default {
  name: "Student",
  data: function () {
    return {name: "vue", address: "Beijing"}
  },
  methods: {
    tips(event) {
      alert(event.target.value)
    }
  }
}


</script>

<template>
  <!--  编写结构 -->
  <div class="student">
    <h1>名字:{{ name }}</h1>
    <h1>地址:{{ address }}</h1>
    <button @click="tips"></button>

  </div>


</template>

<style scoped>
// 编写样式
.class {
  width: 300px;
  height: 300px;
  background-color: skyblue;
}

</style>

创建App主组件-注册其他组件,App.vue

<script>

// 引入Student组件
import Student from "./Student.vue";
 export default {
  name: "App",
   // 注册Student组件
   components:{
    Student
   }

}

</script>


<template>
  <div>
    
    <Student></Student>
  </div>

</template>


<style scoped>
 </style>

编写js文件，创建vm实例，注册App组件 - main.js


// 引入App组件
import App from './App.vue'
// 创建Vue实例
new Vue({
    el:"#root",
    data:{
        test:"test"
    },
    components:{App}
})

标签：school,Vue,编程,vue2,address,组件,data,options
From： https://www.cnblogs.com/Mickey-7/p/18553357