【Vue】非单文件组件

最新推荐文章于 2024-09-10 20:26:21 发布

叨叨凡

最新推荐文章于 2024-09-10 20:26:21 发布

阅读量942

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qaqcfff/article/details/123596061

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

组件化编程

组件的定义：
实现应用中局部功能代码和资源的集合

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

使用组件的三大步骤：
1.定义组件（创建组件）
2.注册组件
2.使用组件（写组件标签）

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

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

案件：

<html>
<head>
    <meta charset='UTF-8'>
    <title></title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
</head>
<body>
    <div id='root'>
        <!-- 第三步，编写组件标签-->
        <school></school>
        <hr>
        <student></student>
        <hr>
        <hello></hello>
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    //第一步，创建school\student组件
    const school = Vue.extend({
        template:`<div>
                    <h2>学校名称：{{schoolName}}</h2>
                    <h2>学校地址：{{schoolAddress}}</h2>
                    <button @click="showName">点我提示学校名称</button>
                  </div>`,
        //一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm管理决定服务于哪个组件
        data(){
            return{
                schoolName:'北京市忠德学校',
                schoolAddress:'北京市朝阳区'
            }
        },
        methods:{
            showName(){
                alert(this.schoolName)
            }
        }
    })

    const student = Vue.extend({
        template:`<div><h2>学生名称：{{studentName}}</h2>
                  <h2>学生地址：{{studentAge}}</h2></div>`,
        data(){
            return{
                studentName:'张三',
                studentAge:18
            }
        }
    })

    const hello = Vue.extend({
        template:`
            <div>
                <h2>你好！{{name}}</h2>
            </div>
        `,
        data(){
            return{
                name:'Tom'
            }
        }
    })
    //第二步，全局注册组件
    Vue.component('hello',hello);
    
    new Vue({
        el:'#root',
        //第二步，局部注册组件
        components:{
            school,student
        }
    })
</script>
</html>