笔记

组件的两种编写形式：

  1. 非单文件组件
    一个文件中包含有n个组件。
  2. 单文件组件
    一个文件中只包含有1个组件。

源码

054_非单文件组件 - 图1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>基本使用</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            Vue中使用组件的三大步骤：
                一、定义 组件(创建 组件)
                二、注册 组件
                三、使用 组件(写组件标签)

            一、如何定义一个组件？
                使用 Vue.extend(options) 创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
                区别如下：
                    1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
                    2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
                备注：使用 template 可以配置组件结构。

            二、如何注册组件？
                1.局部注册：靠new Vue的时候传入components选项
                2.全局注册：靠Vue.component('组件名',组件)

            三、编写组件标签：
                <school></school>
        -->
        <!-- 引入时,用的框架
        <div id="root">
            <h2>学校名称: {{schoolName}}</h2>
            <h2>学校地址: {{address}}</h2>
            <hr>
            <h2>学生姓名: {{studentName}}</h2>
            <h2>学生年龄: {{age}}</h2>
        </div>
        -->
        <!-- 我们开始拆分组件: 上面拆为 school组件，下面拆为 student组件 -->

        <!-- 准备好一个容器 -->
        <!-- 容器1 -->
        <div id="root">
            <!-- 全局组件演示 -->
            <hello></hello>
            <hr>
            <h1>{{msg}}</h1>
            <hr>

            <!-- 第三步：编写 组件标签 方法1:全写-->
            第三步：编写 组件标签 方法1:全写<br/>
            <xuexiao></xuexiao>
            <xuesheng></xuesheng><hr>


            <!-- 第三步：编写 组件标签 方法2:简写-->
            第三步：编写 组件标签 方法2:简写<br/>
            <school></school>
            <student></student>
        </div>

        <!-- 容器2 -->
        <div id="root2">
            <!-- 全局组件演示 -->
            <hello></hello>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false

        //引入时,用的vm
        //创建vm
        /*new Vue({
            el:'#root',
            data:{
                schoolName: '尚硅谷',
                address: '北京',

                studentName: '张三',
                age:18
            }
        })*/



        //开始拆组件:
        //第一步：创建 school组件
        //Vue.extend 是 Vue 的全局 API，它的作用是基于 Vue 构造器创建一个“子类”。这个子类同样能够接收一个包含组件选项的对象。
        const school = Vue.extend({ //{}配置对象
            //模板
            template:`
                <div class="demo">
                    <h2>学校名称：{{schoolName}}</h2>
                    <h2>学校地址：{{address}}</h2>

                    <button @click="showName">点我提示学校名</button>    
                </div>
            `,
            // el:'#root', //★ 组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
            data(){
                return {
                    schoolName:'尚硅谷',
                    address:'北京昌平'
                }
            },
            methods: {
                showName(){
                    alert(this.schoolName)
                }
            },
        })
        //第一步：创建 student组件
        const student = Vue.extend({
            //结构:
            template:`
                <div>
                    <h2>学生姓名：{{studentName}}</h2>
                    <h2>学生年龄：{{age}}</h2>
                </div>
            `,
            //数据:
            //data 的第二种写法：函数式 ★★★。 要求：必须返回一个对象。
            //第二种写法的优势： 每次调用，就会返回一个新的实例化对象。
            data(){
                return {
                    studentName:'张三',
                    age:18
                }
            }
        })

        //全局组件演示: 所有的vm都可以使用这个组件hello
        //第一步：创建 hello组件
        const hello = Vue.extend({
            //结构
            template:`
                <div>    
                    <h2>你好啊！{{name}}</h2>
                </div>
            `,
            //数据
            data(){
                return {
                    name:'Tom'
                }
            }
        })
        //第二步：注册 组件(全局注册)
        Vue.component('hello',hello)

        //创建vm
        new Vue({
            el:'#root',
            data:{
                msg:'你好啊！'
            },
            //第二步：注册 组件(局部注册)
            //component 英[kəmˈpəʊnənt] 美[kəmˈpoʊnənt] n.组成部分;成分;部件; adj. 成分的;构成的;组成的;合成的;
            components:{
                //方法1:全写
                xuexiao:school,
                xuesheng:student,

                //方法2:简写
                school,
                student
            }
        })


        new Vue({
            el:'#root2',
        })
    </script>
</html>