Vue 的内置组件- component

最新推荐文章于 2024-05-11 14:22:46 发布

qq_41302594

最新推荐文章于 2024-05-11 14:22:46 发布

阅读量814

点赞数

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

本文链接：https://blog.csdn.net/qq_41302594/article/details/105298762

版权

Vue.js 专栏收录该内容

22 篇文章 3 订阅

订阅专栏

Vue 的内置组件 - component

一、学习的原因

一开始学习 Vue.js 的时候，经常将用于表示组件内容的 components 选项写成 component，然后导致发生错误，有一段时间才能检查出来，所以，这次将 component 这个内置组件弄出来单独作一个学习，依次为戒。

二、什么是 `component` 内置组件

官方解释为：渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。

官网的用法为：

<!-- 动态组件由 vm 实例的属性值 `componentId` 控制 -->
<component :is="componentId"></component>

<!-- 也能够渲染注册过的组件或 prop 传入的组件 -->
<component :is="$options.components.child"></component>

是不是看不懂？我们来看下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <h1>component Vue 内置组件</h1>
    <hr>
    <div id="app">
        <component :is="who"></component>
    </div>
</body>
<script>
    const componentA = {
        template: `
            <div style="color:red">
                I'm a componentA.
            </div>
        `
    };
    const componentB = {
        template: `
            <div style="color:green">
                I'm a componentB.
            </div>
        `
    };
    const componentC = {
        template: `
            <div style="color:pink">
                I'm a componentC.
            </div>
        `
    };
    var app = new Vue({
        el: '#app',
        data: {
            who: 'componentA',
        },
        components: {
            componentA,
            componentB,
            componentC,
        }
    })
</script>
</html>

这里有三个局部组件，分别是 componetA， componentB，componentC，在这个新创建的 Vue 实例中，将这三个局部组件作为资源包含在这个 Vue 实例中。

<component> 组件有一个 is 属性，通过绑定 is 的属性值，来决定哪一个组件将会被渲染。我这里绑定的是 who，who 的值为 componentA，所以这里就会渲染 componentA 这个组件。

在这里插入图片描述

所以，这里就可以通过一个方法来修改展示的组件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <h1>component Vue 内置组件</h1>
    <hr>
    <div id="app">
        <component :is="componentName"></component>
        <button @click="changeComponent()">改变组件</button>
    </div>
</body>
<script>
    const componentA = {
        template: `
            <div style="color:red">
                I'm a componentA.
            </div>
        `
    };
    const componentB = {
        template: `
            <div style="color:green">
                I'm a componentB.
            </div>
        `
    };
    const componentC = {
        template: `
            <div style="color:pink">
                I'm a componentC.
            </div>
        `
    };
    var app = new Vue({
        el: '#app',
        data: {
            componentName: 'componentA'
        },
        components: {
            componentA,
            componentB,
            componentC,
        },
        methods: {
            changeComponent(){
                switch(this.componentName) {
                    case 'componentA':
                        this.componentName = 'componentB';
                        break;
                    case 'componentB':
                        this.componentName = 'componentC';
                        break;
                    case 'componentC':
                        this.componentName = 'componentA';
                        break;
                }
            }
        },
    })
</script>
</html>

这里添加了一个按钮，点击按钮会更改 <component> is 属性绑定的值来达到更换展示组件的目的。

这里是直接更换了组件，所以在 DOM 树中，对应的元素也发生了变化。

qq_41302594

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 的内置组件- component

Vue 的内置组件 - component一、学习的原因一开始学习 Vue.js 的时候，经常将用于表示组件内容的 components 选项写成 component，然后导致发生错误，有一段时间才能检查出来，所以，这次将 component 这个内置组件弄出来单独作一个学习，依次为戒。二、什么是 component 内置组件官方解释为：渲染一个“元组件”为动态组件。依 is 的值，来决定...
复制链接

扫一扫