vue3动态组件，p标签内放入div(v-is)，局部组件嵌套

最新推荐文章于 2024-06-15 18:37:50 发布

差不少

最新推荐文章于 2024-06-15 18:37:50 发布

阅读量2.1k

点赞数 1

分类专栏：前端基础 h5

本文链接：https://blog.csdn.net/c62387723sq/article/details/126021119

版权

Vue3 动态组件局部组件嵌套组件 v-is

关键词由CSDN通过智能技术生成

基础同时被 3 个专栏收录

69 篇文章 1 订阅

订阅专栏

前端

68 篇文章 1 订阅

订阅专栏

22 篇文章 1 订阅

订阅专栏

vue3动态组件

用component标签
配合：is使用
在这里插入图片描述
component标签上使用id等都可以正常出现在组件的div上

@click中可以直接给变量赋值
把tab的值赋值给tabName
点哪个输出哪个的tab（tab其实就是buttonMsg的值的循环）

总结：

组件的其他写入方式

正常情况下div标签是无法放入标签内的，p标签内只能放入行内元素

注意：
在这里插入图片描述
网页中的实际结果：
变成了div标签上下分别出现了一个p标签

注意：
怎么把div放入p标签：
span行内元素通过v-is，变成组件leo，就可以把组件leo的div(leo组件内的div)放入p标签了
在这里插入图片描述

总结：

组件进阶—局部组件

组件写在creareApp中
在这里插入图片描述
局部组件components中嵌套components

组件的嵌套
myButton里嵌套hello

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <my-button></my-button>       
    </div>
    <template id="button">
        <div>
            {{msg}}
            <hello></hello> 
        </div>
    </template>
    <template id="hello">
        <div>
            hello
        </div>
    </template>
</body>
</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //组件的三步骤：1.定义组件 2.注册组件 3.使用组件
    let hello={
        template:'#hello'
    }
    let myButton={
        template:'#button',
        data(){
            return {
                msg:'lly'
            }
        },
        components:{
            hello
        }
    }
    let vm=new Vue({
        el:"#app",
        data:{

        },
        components:{
          myButton 
        }
    })
</script>