18_vue中全局组件如何使用

最新推荐文章于 2024-07-15 16:14:03 发布

嫣夜来

最新推荐文章于 2024-07-15 16:14:03 发布

阅读量766

点赞数

分类专栏： Vue前端框架

本文链接：https://blog.csdn.net/qq_41865652/article/details/104058694

版权

Vue前端框架专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1、什么是全局组件

关于全局组件，大家不用想的太过于复杂，因为组件本身就是一个可重复使用的Vue实例对象，加上一个全局的修饰词，就是说可以在当前文件任意vue实例中使用的Vue实例对象，这个与任何编程语言中的全局变量与局部变量的概念是异曲同工的，纯属个人理解，不喜勿喷。

2、全局组件的定义语法

// 语法---Vue.component('组件名', {组件参数})

Vue.component( id, [definition] )

参数：

{string} id // 组件名称

{Function | Object} [definition]  // 组件参数

示例：

Vue.component('praise', {
    template: '<button @click="count++">点赞数({{count}})</button>',
    data() {
        return {
            count: 0
        }
    }
})

3、创建全局组件和Vue实例对象的区别

1 组件没有el参数, 原因是组件不会和具体的页面元素绑定
2 组件必须有template参数, 原因是组件需要渲染页面, template就是需要渲染的html
3 组件也是一个Vue的实例, 所以在组件中也有data/methods等
4 data必须是一个函数, 并返回一个对象

4、实例代码演示

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 第一步：引入vue.js文件 -->
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <!-- 第二步：创建视图v -->
    <div id="app">
        <!-- 第四步：在视图v中引用全局组件 -->
        <praise></praise>
        <praise></praise>
        <praise></praise>
    </div>
</body>
<script>
    // 第三步：创建VM,在js中创建全局组件 
    Vue.component('praise', {
    template: '<button @click="count++">点赞({{count}})</button>',
    data() {
        return {
            count: 0
        }
    }
    }); 
    // 创建vue实例
    const app = new Vue({
        el: '#app',
        // 绑定数据模型M
        data: {
            count: 0
        },
        methods: {}
    });
</script>

</html>

演示代码结果：
在这里插入图片描述

5、为什么新建全局组件data必须是一个函数, 并返回一个对象？

大家要知道，如果使用全局组件的话，全局组件中的data的属性如果在内存中使用基本数据类型来进行存储的话，对于复用的全局组件而言，一但其中一个被更改，其他的也同样会被更改；如果我们把属性使用对象进行存储，那么当不同存储位置中的对象属性值被修改的时候，这种修改是不会相互影响的。

嫣夜来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
18_vue中全局组件如何使用

1、什么是全局组件关于全局组件，大家不用想的太过于复杂，因为组件本身就是一个可重复使用的Vue实例对象，加上一个全局的修饰词，就是说可以在当前文件任意vue实例中使用的Vue实例对象，这个与任何编程语言中的全局变量与局部变量的概念是异曲同工的，纯属个人理解，不喜勿喷。2、全局组件的定义语法// 语法---Vue.component('组件名', {组件参数})Vue.component(...
复制链接

扫一扫

专栏目录