Vue 组件化编程

Vue 组件化编程

非单文件组件

定义组件

使用Vue.extend(options）创建

不要写el
data要写成函数，避免组件被复用时，数据存在引用关系

注册组件

局部注册：new Vue()的时候，options传入components
全局注册：Vue.Component("组件名",组件)

全局注册

<div id="app">
        <!-- 使用组件 -->
        <school></school>
        <!-- 单标签写法需要在脚手架坏境下使用 -->
        <!-- <school /> -->
    </div>

Vue.config.productionTip = false;
    // 定义组件
    const school = Vue.extend({
        template: `
        <div>
            <h1>我是一个school组件</h1>
            <h1>我是:{{userName}}</h1>
            <h1>我是:{{func()}}</h1>
        </div>
        `,
        data() {
            return {
                userName: "张三"
            }
        },
        methods: {
            func() {
                return 100;
            }
        }
    })
    // 全局注册组件
    Vue.component("school", school);
    var vm = new Vue({
        el: "#app",
        data() {
            return {}
        },
    })

局部注册

<div id="app">
        <!-- 使用组件 -->
        <school></school>
        <!-- 单标签写法需要在脚手架坏境下使用 -->
        <!-- <school /> -->
    </div>

Vue.config.productionTip = false;
    // 定义组件
    const school = Vue.extend({
        template: `
        <div>
            <h1>我是一个school组件</h1>
            <h1>我是:{{userName}}</h1>
            <h1>我是:{{func()}}</h1>
        </div>
        `,
        data() {
            return {
                userName: "张三"
            }
        },
        methods: {
            func() {
                return 100;
            }
        }
    })
    // 全局注册组件
    // Vue.component("school", school);
    var vm = new Vue({
        el: "#app",
        data() {
            return {}
        },
        // 局部注册组件
        components:{
        	school;
    })

组件嵌套

<div id="app"></div>

 Vue.config.productionTip = false;
    //定义student组件
    const student = Vue.extend({
        name: 'student',
        template: `
                  <div>
                      <h4>学生姓名：{{name}}</h4>	
                      <h4>学生年龄：{{age}}</h4>	
                </div>
              `,
        data() { return { name: '张三', age: 18 } }
    })

    //定义school组件
    const school = Vue.extend({
        name: 'school',
        template: `
                  <div>
                      <h3>学校名称：{{name}}</h3>	
                      <h3>学校地址：{{address}}</h3>	
                      <student></student>
                 </div>
              `,
        data() { return { name: '某某大学', address: '北京' } },
        //注册组件（局部）
        components: { student }
    })

    //定义hello组件
    const hello = Vue.extend({
        template: `<h3>{{msg}}</h3>`,
        data() { return { msg: '欢迎来到某某大学学习！' } }
    })

    //定义app组件
    const app = Vue.extend({
        template: `
                  <div>	
                      <hello></hello>
                     <school></school>
                </div>
              `,
        components: { school, hello }
    })

    //创建vm
    new Vue({
        el: '#app',
        template: '<app></app>',
        //注册组件（局部）
        components: { app }
    })

在这里插入图片描述

Vue.extend()方法本质就是实例化VueComponent构造函数
两种注册方法的区别：
全局注册：只需要注册一次，在任何组件中都可以使用
局部注册：在变量A中注册，只能在A中使用组件
VueComponent.prototype.__proto__===Vue.prototype

组件命名特性：

可以使用小写或者大写，首字母都会自动转为大写
my-school 和 myschool 都为转为同样格式的 MySchool,但是myschool需要在脚手架坏境下使用
使用的组件名可以不和组件定义的名字相同，组件名可以自定义
使用的组件名需要规避HTML中已有的元素标签名称

单文件组件

MySchool.vue

<template>
    <h1>我是MySchool组件</h1>
</template>

<script>
export default {
    name:"MySchool",  // 不能使用单个单词，如school
    data(){
        return{
            msg:"欢迎学习vue",
        }
    }
}
</script>

<style>

</style>

MyStudent.vue

<template>
    <h1>我是MyStudent.组件</h1>
</template>

<script>
export default {
    name:"MyStudent.",  // 不能使用单个单词，如school
}
</script>

<style>

</style>

MyApp.vue

<template>
	<div id="app">
        <MySchool></MySchool>
        <MyStudent></MyStudent>
    </div>
</template>

<script>
// 导入
import MySchool from './MySchool.vue';
import MyStudent from './MyStudent.vue';
export default {
    name:"MyApp.",  // 不能使用单个单词，如school
    // 注册
    components:{
    	MySchool,
    	MyStudent
    }
}
</script>

<style>

</style>