Vue中一个文件中配置多个组件

最新推荐文章于 2024-07-10 09:34:12 发布

SUMMERENT

最新推荐文章于 2024-07-10 09:34:12 发布

阅读量1.7k

点赞数

分类专栏： Vue 文章标签：大数据

本文链接：https://blog.csdn.net/SUMMERENT/article/details/125808093

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、Vue中创建组件的三大不步骤

（1）定义组件（创建组件）

（2）注册组件

（3）使用组件（编写组件标签）

2、定义一个组件

使用Vue.extend(options)创建，其中options和New Vue（options）时传入的那个options几乎一样，但也有区别

区别如下：

1、el不要写，为什么？-----最终所有的组件都要经过一个vm管理，由vm中的el决定服务的是哪个容器

2、data必须写成函数，为什么？----避免组件被复用时，数据存在引用关系

3、注册组件

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

2、全局注册：Vue.component('组件名‘，组件）

4、组件标签

例如：创建一个名为 hello的组件

使用组件标签为： <hello></hello>

5、基本使用组件-Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单文件多组件-基本使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
    <div id="root">
        <hello></hello>
        <hr>
        <h1>{{msg}}</h1>
        <hr>
        <!--第三步：编写组件标签-->
        <school></school>
        <hr/>
        <student></student>

    </div>

    <div id="root2">
        <hello></hello>
    </div>

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

        //第一步：创建school组件
        const school = Vue.extend({
            template:`
                <div>
                  <h2>学校名称：{{schoolName}}</h2>
                  <h2>学校地址：{{address}}</h2>
                  <button @click="showName">点我提示学校名</button>
                </div>
            `,
            data(){
                return {
                    schoolName:'复旦大学',
                    address:'上海'
                }
            },
            methods:{
                showName(){
                    alert(this.schoolName)
                }
            }
        })
        //第一步：创建student组件
        const  student = Vue.extend({
            template:`
                <div>
                    <h2>学生名称：{{studentName}}</h2>
                    <h2>学生年龄：{{age}}</h2>
                </div>
            `,
            data(){
                return{
                    studentName:'Tom',
                    age:'19'
                }
            }
        })

        const hello = Vue.extend({
            template:`
                <div>
                   <h2>欢迎你：{{name}}</h2>
                </div>
            `,
            data(){
                return{
                    name:'小明'
                }
            }
        });

        //注册全局组件
        Vue.component('hello',hello)

        new Vue({
            el: '#root',
            data: {
                msg:'你好呀！'
            },
            //第二步：注册组件  (局部注册）
            components:{
                school,
                student
            }
        })

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

6、注意点

一、关于组件名：

一个单词组成写法：（首字母小写）：school 或者(首字母大写）：School

多个单词组成写法：（kebab-case命名）：my-school 或者（CameCase）：MySchool（需要Vue脚手架支持）

二、关于组件标签：

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

第二种写法：<hello/>

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

三、简写方式

const hello = Vue.extend(options) 可简写为 cosnt hello = options

SUMMERENT

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue中一个文件中配置多个组件

使用Vue.extend(options)创建，其中options和NewVue（options）时传入的那个options几乎一样，但也有区别区别如下1、el不要写，为什么？-----最终所有的组件都要经过一个vm管理，由vm中的el决定服务的是哪个容器2、data必须写成函数，为什么？----避免组件被复用时，数据存在引用关系。...
复制链接

扫一扫

专栏目录