尚硅谷Vue学习——非单文件组件

才疏学浅的小缘同学

已于 2022-03-21 14:45:33 修改

阅读量573

点赞数 1

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

于 2022-03-21 14:45:09 首次发布

本文链接：https://blog.csdn.net/qq_44790505/article/details/123635395

版权

Vue学习专栏收录该内容

45 篇文章 2 订阅

订阅专栏

本文详细介绍了Vue中组件的定义、注册及使用步骤。通过Vue.extend创建组件，注意data必须为函数以避免数据共享问题。组件注册包括局部注册和全局注册，并在模板中通过标签形式使用组件。示例代码展示了如何创建并使用programmer和brother两个组件。

摘要由CSDN通过智能技术生成

一、如何定义一个组件？

二、如何注册组件？

三、编写组件标签

Vue使用组件的三大步骤：
   一、定义组件（创建组件）
   二、注册组件
   三、使用组件（写组件标签）

一、如何定义一个组件？

   使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但区别如下：

   el不要写。因为最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
   data必须写成函数。避免组件被复用时，数据存在引用关系。

   备注：使用template可以配置组件结构

二、如何注册组件？

局部注册：靠new Vue的时候传入components选项
全局注册：靠Vue,component(‘组件名’，组件)

三、编写组件标签

<组件名></组件名>

<!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>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎和{{name}}一起学习</h2><hr>
        <!-- 第三步，编写组件标签 -->
        <programmer></programmer>
        <hr>
        <brother></brother>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip =  false // 阻止 vue 在启动时生成生产提示

        //第一步：创建programmer组件
        const programmer = Vue.extend({
            template:`
            <div>
                <h2>程序员姓名:{{programmerName}}</h2>
                <h2>程序员年龄:{{age}}</h2>
            </div>
            `,
            //el:'#root',组件定义时，一定不要写el配置项，最终所有的组件都由一个vm来统一进行管理，由vm决定服务对象。
            data(){
                return {
                    programmerName:'辉哥',
                    age:18
                }
            }
        })

        //第一步：创建brother组件
        const brother = Vue.extend({
            template:`
            <div>
                <h2>兄弟姓名:{{brotherName}}</h2>
                <h2>兄弟年龄:{{brotherAge}}</h2>
            </div>
            `,
            //el:'#root',组件定义时，一定不要写el配置项，最终所有的组件都由一个vm来统一进行管理，由vm决定服务对象。
            data(){
                return {
                    brotherName:'贺灵志',
                    brotherAge:18
                }
            }
        })

    //创建vm
    new Vue({
        el:'#root',
        data:{
            name:'才疏学浅的小缘同学',
        },
        // 第二步，注册组件
        components:{
            programmer,
            brother
        }
    })
</script>
</html>

才疏学浅的小缘同学

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
尚硅谷Vue学习——非单文件组件

Vue使用组件的三大步骤：一、定义组件（创建组件）二、注册组件三、使用组件（写组件标签）一、如何定义一个组件？使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但区别如下： el不要写。因为最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器 data必须写成函数。避免组件被复用时，数据存在引用关系。备注：使用template可以...
复制链接

扫一扫