全局组件，局部组件，插槽的用法

最新推荐文章于 2024-02-15 10:38:25 发布

Holly

最新推荐文章于 2024-02-15 10:38:25 发布

阅读量138

点赞数

分类专栏： vue 文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/qq_43687185/article/details/120724666

版权

vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!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">
    <!-- 引入vue -->
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>全局组件和局部组件和插槽的用法</title>
    <!-- 顾名思义,全局组件注册之后,可以全局使用;
        局部组件注册之后,只能在定义它的el中使用，不能再其他位置使用，否则就无法生效 -->

    <!-- 引入样式elementui -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
</style>

<body>
    <div id="app">
        <el-input placeholder="请输入内容" v-model="input" clearable>
        </el-input>

        <div>{{message}}</div>
        <hr>
        <!--全局组件-->
        <hello></hello>
        <!-- 插槽 -->
        <hello>插槽更改内容</hello>
        <hr>
        <!--局部组件-->
        <zujian></zujian>
    </div>

    <!-- 全局组价内容 -->
    <template id="zujian1">
        <div>
            <h1>你好，我是一个全局组件</h1>
            <h1>{{things1}}</h1>
            <slot>默认插槽</slot>
        </div>
    </template>

    <!-- 局部组件内容 -->
    <template id="zujian2">
        <div>
            <h2>你好，我是一个局部组件</h2>
            <h2>{{things2}}</h2>
            <!--全局组件在局部组件内使用-->
            <hello></hello>
        </div>
    </template>

    <script>
        // 构造全局组件
        Vue.component("hello", {
            // 组件名字为hello，可以在app中使用
            template: '#zujian1',
            // 组件内数据变量
            data: function () {
                return {
                    things1: "我是全局组件内的数据"
                }
            },
        })

        new Vue({
            el: '#app',
            data: {
                message: '我是app里的内容!',
                input: '',
            },
            components: {
                'zujian': {
                    template: '#zujian2',
                    data: function () {
                        return {
                            things2: "我是局部组件内的数据"
                        }
                    },
                }
            }
        })
    </script>
</body>

</html>