VUE3.0,DAY34，非单文件组件

最新推荐文章于 2023-05-12 07:54:59 发布

疯子的梦想＠

最新推荐文章于 2023-05-12 07:54:59 发布

阅读量323

点赞数

分类专栏：前端文章标签： vue.js javascript node.js

本文链接：https://blog.csdn.net/weixin_48681463/article/details/120129612

版权

前端专栏收录该内容

110 篇文章 4 订阅

订阅专栏

VUE3.0,DAY34

非单文件组件

就是一个文件中包含有n个组件，例如下图中一个a.html文件内包含多个组件
在这里插入图片描述

单文件组件

一个文件中只包含有一个组件。一个.vue就是一个文件。
在这里插入图片描述

如何定义（创建）组件

首先来看一个基本的案例展示，展示效果图如下所示。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>非单文件组件</title>
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
</head>

<body>
    <div id="root">
        <!-- <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{adsress}}</h2>
        <!-hr是分隔符-->
        <!-- <hr>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生年龄：{{age}}</h2> -->
        <!--上边是name复用的写法，下边是区分的写法，避免name重复调用发生冲突-->
        <h2>学校名称：{{schoolName}}</h2>
        <h2>学校地址：{{address}}</h2>
        <!--hr是分隔符-->
        <hr>
        <h2>学生姓名：{{studentName}}</h2>
        <h2>学生年龄：{{age}}</h2>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el: "#root",
        data() {
            //用不同的对象，即school和student，区别开name不同的调用，避免在调用时发生冲突
            // return {
            //     school: {
            //         name: '尚硅谷',
            //         address: '哈哈'
            //     },
            //     student: {
            //         name: '张三',
            //         age:18
            //     }
            // }
            //下边是减少层级的写法。
            return {
                schoolName: '哈哈',
                address: '123',
                studentName: '呜呜',
                age: 18
            }
        },
    })
</script>

</html>

在这里插入图片描述
组件的使用包括，创建组件，注册组件，使用组件。
下边是创建一个school组件，一个student组件。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>非单文件组件</title>
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
</head>

<body>
    <div id="root">
        <!-- <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{adsress}}</h2>
        <!-hr是分隔符-->
        <!-- <hr>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生年龄：{{age}}</h2> -->
        <!--上边是name复用的写法，下边是区分的写法，避免name重复调用发生冲突-->
        <h2>学校名称：{{schoolName}}</h2>
        <h2>学校地址：{{address}}</h2>
        <!--hr是分隔符-->
        <hr>
        <h2>学生姓名：{{studentName}}</h2>
        <h2>学生年龄：{{age}}</h2>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false
    //创建school组件，一定需要调用一个api，叫vue.extend,括号里边写配置项
    const school = Vue.extend({
        //注意这里不要写vue实例中的el配置项，因为最终所有的组件都要被一个vm管理，
        //由vm决定服务于那个容器。
        //自定义组件时，data必须写成函数的形式，不要写data:{}对象形式
        data() {
            return {
                schoolName: '哈哈',
                address: '123',
            }
        },
    })
    //创建student组件
    const student = Vue.extend({
        data() {
            return {
                studentName: '呜呜',
                age: 18
            }
        },
    })
    //new Vue({
       // el: "#root",
        //data() {
            //用不同的对象，即school和student，区别开name不同的调用，避免在调用时发生冲突
            // return {
            //     school: {
            //         name: '尚硅谷',
            //         address: '哈哈'
            //     },
            //     student: {
            //         name: '张三',
            //         age:18
            //     }
            // }
            //下边是减少层级的写法。
           // return {
              //  schoolName: '哈哈',
              //  address: '123',
              //  studentName: '呜呜',
              //  age: 18
            //}
       // },
   // })
</script>

</html>

下边是注册组件和使用组件

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>非单文件组件</title>
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
</head>

<body>
    <div id="root">
        <!--编写组件标签,刚刚注册的两个-->
        <zu_jian_1></zu_jian_1>
        <zu_jian_2></zu_jian_2>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false
    //创建school组件，一定需要调用一个api，叫vue.extend,括号里边写配置项
    const school = Vue.extend({
        //注意这里不要写vue实例中的el配置项，因为最终所有的组件都要被一个vm管理，
        //由vm决定服务于那个容器。
        //自定义组件时，data必须写成函数的形式，不要写data:{}对象形式
        template: `
        <div>
            <h2>学校名称:{{schoolName}}</h2>
            <h2>学校地址:{{address}}</h2>
            <hr>
        </div> 
        `,
        data() {
            return {
                schoolName: '哈哈',
                address: '123',
            }
        },
    })
    //创建student组件
    const student = Vue.extend({
        template: `
        <div>
            <h2>学生姓名:{{studentName}}</h2>
            <h2>学生年龄:{{age}}</h2>
        </div> 
        `,
        data() {
            return {
                studentName: '呜呜',
                age: 18
            }
        },
    })
    new Vue({
        el: "#root",
        //components就是组件们的意思,这里组件注册完毕（局部注册）
        components: {
            zu_jian_1: school,
            zu_jian_2: student
        }
    })
</script>

</html>

在这里插入图片描述

疯子的梦想＠

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE3.0,DAY34，非单文件组件

VUE3.0,DAY34非单文件组件单文件组件如何定义（创建）组件非单文件组件就是一个文件中包含有n个组件，例如下图中一个a.html文件内包含多个组件单文件组件一个文件中只包含有一个组件。一个.vue就是一个文件。如何定义（创建）组件首先来看一个基本的案例展示，展示效果图如下所示。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta
复制链接

扫一扫