Vue单文件组件的创建及三种暴露（分别、统一、默认）方式

人工智能有点

已于 2023-03-31 14:48:25 修改

阅读量7.3k

点赞数 12

分类专栏： Web开发文章标签： vue.js 前端 javascript

于 2022-08-10 21:39:45 首次发布

本文链接：https://blog.csdn.net/weixin_44417441/article/details/126274962

版权

Web开发专栏收录该内容

20 篇文章 1 订阅

订阅专栏

文章目录

.vue文件变成js文件的两种方式：
例：创建school.vue组件
- 组件起名
- 暴露三种方式：
创建两个组件，分别是Student和School
- 代码

.vue文件变成js文件的两种方式：

webpack
脚手架（使用）

例：创建school.vue组件

组件起名

如果是一个单词的名字:
第一种写法直接纯小写school.vue
第二种写法第一个字母大写School.vue(一般使用)
多个单词：
第一种写法 my-school.vue
第二种写法（大驼峰） MySchool.vue(一般使用)

暴露三种方式：

demo: <sctipt></script> 中写三种暴露组件方式之一。

<template>
    <!-- 组件的结构 -->
    <div class="demo">
        <h2>学校名称：{{schoolName}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showName">点我提示学校名</button>
    </div>
</template>
<script>
    //组件交互的相关代码
</script>
<style>
     /* 组件的样式 */
     .demo{
        background-color: orange;
     }
</style>

第一种：分别暴露（写在<sctipt></script>中）

export const school = Vue.extend({
    data(){
        return {
            schoolName:'尚硅谷',
            address:'北京',
        }
    },
    methods:{},
})

第二种：统一暴露（写在<sctipt></script>中）

const school = Vue.extend({
    data(){
        return {
            schoolName:'尚硅谷',
            address:'北京',
        }
    },
    methods:{},
})
export {school}

第三种：默认暴露

const school = Vue.extend({
    data(){
        return {
            schoolName:'尚硅谷',
            address:'北京',
        }
    },
    methods:{},
})
export default school

一般使用默认暴露，因为使用默认暴露在导入时，直接使用 import ??? from ??? 就可以了。但是使用分别暴露和统一暴露都需要这样写 import {???} from ??? 。

使用默认暴露时，可以不用中转变量。方式如下：

export default Vue.extend({
    data(){
        return {
            schoolName:'尚硅谷',
            address:'北京',
        }
    },
    methods:{},
})

然后还可以进一步简写，省去Vue.extend()，使用创建组件的简写形式。直接暴露组件的配置对象。

export default {
    data(){
        return {
            schoolName:'尚硅谷',
            address:'北京',
        }
    },
    methods:{},
}

加个名字（组件的name属性），名字会在开发者工具种呈现。
在这里插入图片描述

创建两个组件，分别是Student和School

创建了App组件
在App组件中引入组件（在脚手架中，import组件时，可以带.vue后缀也可以不带）
在main.js（入口文件）中创建Vue实例

import App from './App'

new Vue({
    el:'#root',
    components:{App}
})

创建Vue实例之后，发现没有Vue实例服务的实例，所以需要创建一个html文件。

在index.html文件中，在body的闭标签上方引入main.js文件，保证容器先存在。

在main.js上方引入main.js依赖的vue.js文件

然后把写进页面（两种形式：直接写或者通过template）

代码

以下代码不能运行，来源尚硅谷，引导学习使用。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习一下单文件组件的语法</title>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
    </div>
    <script src="../js/vue.js"></script>
    <script src="./main.js"></script>
</body>
</html>

main.js

import App from './App.vue'

new Vue({
    el:'#root',
    template:`<App></App>`,
    components:{App}
})

App.vue

<template>
    <School></School>
    <Student></Student>
</template>

<script>
    //引入组件
    import School from './School'
    import Student from './Student.vue'

    export default {
        name:'App',
        //注册组件
        components:{
            School,
            Student
        }
    }
</script>

<style></style>

School.vue和Student.vue组件

<template>
    <!-- 组件的结构 -->
    <div class="demo">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showName">点我提示学校名</button>
    </div>
</template>

<script>
    //组件交互的相关代码
    export default {
        name:'School',
        data(){
            return {
                name:'尚硅谷',
                address:'北京',
            }
        },
        methods:{
            showName(){
                alert(this.name)
            }
        },
    }
</script>

<style>
     /* 组件的样式 */
     .demo{
        background-color: orange;
     }
</style>

<template>
    <!-- 组件的结构 -->
    <div class="demo">
        <h2>学生姓名：{{name}}</h2>
        <h2>学生年龄：{{age}}</h2>
        <button @click="showName">点我提示学生名</button>
    </div>
</template>

<script>
    //组件交互的相关代码
    export default {
        name:'Student',
        data(){
            return {
                name:'张三',
                age:18,
            }
        },
        methods:{
            showName(){
                alert(this.name)
            }
        },
    }
</script>

人工智能有点

关注

12
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
Vue单文件组件的创建及三种暴露（分别、统一、默认）方式

在index.html文件中，在body的闭标签上方引入main.js文件，保证容器先存在。在App组件中引入组件（在脚手架中，import组件时，可以带.vue后缀也可以不带），省去Vue.extend()，使用创建组件的简写形式。直接暴露组件的配置对象。创建Vue实例之后，发现没有Vue实例服务的实例，所以需要创建一个html文件。在main.js上方引入main.js依赖的vue.js文件。加个名字（组件的name属性），名字会在开发者工具种呈现。School.vue和Student.vue组件。..
复制链接

扫一扫