WEB前端：vuejs全家桶（22）：组件的分类：全局组件、局部组件

最新推荐文章于 2024-05-07 11:01:28 发布

hahahafree

最新推荐文章于 2024-05-07 11:01:28 发布

阅读量174

点赞数

分类专栏： vuejs 文章标签： vuejs

本文链接：https://blog.csdn.net/weixin_43731793/article/details/102970665

版权

vuejs 专栏收录该内容

40 篇文章 3 订阅

订阅专栏

3. 组件的分类

分类：全局组件、局部组件

全局组件

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

<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div class="itany">
        <my-world></my-world>
    </div>
</body>
<script>
    //   全局组件，可以在所有vue实例中使用
    Vue.component('my-world', {
        template: '<h1>你好，世界！</h1>'
    });

    new Vue({
        el: '.itany'
    })
</script>

</html>

局部组件，只能在当前vue实例中使用

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

<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div class="itany">
        <my-world></my-world>
    </div>
</body>
<script>
    new Vue({
        el: '.itany',
        components: { //局部组件，只能在当前vue实例中使用
            'my-world': {
                template: '<h3>welcome to guangzhou</h3>'
            }
        }
    })
</script>

</html>

全局组件、局部组件，数据绑定

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

<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div class="itany">
        <my-hello></my-hello>
        <my-world></my-world>
    </div>
</body>
<script>
    /**
     * 全局组件，可以在所有vue实例中使用
     */
    Vue.component('my-hello', {
        template: '<h3>{{name}}</h3>',
        data: function() { //在组件中存储数据时，必须以函数形式，函数返回一个对象
            return {
                name: 'alice'
            }
        }
    });
    new Vue({
        el: '.itany',
        components: { //局部组件，只能在当前vue实例中使用
            'my-world': {
                template: '<h3>{{age}}</h3>',
                data() {
                    return {
                        age: 25
                    }
                }
            }
        }
    })
</script>

</html>

hahahafree

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB前端：vuejs全家桶（22）：组件的分类：全局组件、局部组件

3. 组件的分类分类：全局组件、局部组件全局组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="js/vue.js"></scrip...
复制链接

扫一扫

专栏目录