Vue基础(22)_Vue组件化编程

使用Vue.extend(options) 创建，其中options和new Vue(options)时传入的那个options【配置项】几乎一样，但是也有点区别，区别如下：

1、el不要写 ，为什么？

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

2、data必须写成函数 ，为什么？

-- 数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据 。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就可能会造成一个组件数据变了其他全组件数据都会跟着变的隐患。

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

二：如何注册组件？

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

2、全局注册：靠Vue.component('组件名',组件)。注意V需要大写。

三：使用组件：

编写组件标签 ,例如：

<student1></student1>

<student2></student2>

组件的几个注意点

1、关于组件名

由一个单词组成：

第一种写法(首字母小写)：school

第二种写法(首字母大写)：School

由多个单词组成：

第一种写法(kebab-case【短横线】命名):my-school

第二种写法(CamelCase【大驼峰】命名):MySchool(需要Vue脚手架支持)

备注：

(1)、组件名尽可能回避HTML中已有的元素名称 ，例如：h2、H2都不行。

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

2、关于组件标签：

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

第二种写法：<school/>

备注：不使用脚手架时，<school/>会导致后续组件不能渲染。

3、组件定义简写方式：

const school = Vue.extend(options)

可简写为：
const school = options

代码示例：

html 复制代码

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>非单文件组件</title>
</head>

<body>
    <div id="root">
        <h2 style="color: chocolate;">{{message}}</h2>
        <!-- 第三步：编写组件标签 -->
        <school></school>
        <hr>
        <student1></student1>
        <student2></student2>
        <hr>
    </div>
    <div id="root2">
        <h2 style="color: chocolate;">{{message}}</h2>
        <!-- 第三步：编写组件标签 -->
        <school></school>
    </div>
    <script>
        // 第一步：创建school组件，中转变量名为：school。
        const school = Vue.extend({
            // 开发者工具优先呈现name配置项
            name:'JXshifan',
            template: `
                <div>       
                    <h3>学校名称：{{schoolName}}</h3>
                    <h3>学校地址：{{address}}</h3>
                    <button @click = "showName">点我提示学校名</button>
                </div>
            `,
            data() {
                return {
                    schoolName: '江西师范大学',
                    address: '江西省南昌市紫阳大道99号'
                }
            },
            methods: {
                showName() {
                    alert(this.schoolName);
                }
            },
        })

        // 第一步：创建student1组件，中转变量名为：student1。
        const student1 = Vue.extend({
            template: `
                <div>
                    <h3>学生姓名：{{studentName}}</h3>
                    <h3>学生年龄：{{age}}</h3>
                </div>
            `,
            data() {
                return {
                    studentName: '张三',
                    age: 18
                }
            },
        })

        // 第一步：创建student2组件，中转变量名为：student2。
        // 组件定义简写方式：去掉Vue.extend，直接上配置项。
        const student2 = ({
            template: `
                <div>
                    <h3>学生姓名：{{studentName}}</h3>
                    <h3>学生年龄：{{age}}</h3>
                </div>
            `,
            data() {
                return {
                    studentName: '李四',
                    age: 20
                }
            },
        })

        // 第二步：注册全局组件。属性名：组件名。属性值：中转变量名。
        Vue.component("school",school);

        new Vue({
            el: '#root',
            data: {
                message: '根目录：root1'
            },
            // 第二步：注册局部组件。属性名：组件名。属性值：中转变量名。
            components: {
                student1: student1,
                student2: student2
            }
        })

        new Vue({
            el:'#root2',
            data:{
                message:'根目录：root2'
            }
        })
    </script>
</body>

</html>