Vue基础の组件

时间：2021-03-26 23:02:41 阅读：47 评论：0 收藏：0 [点我收藏+]

__全局组件__：
- 优缺点：一直挂载影响性能使用简单
- 命名规范：下划线，小写
- 全局组件的定义：

<body>
    <div id="app"></div>
    <script>
        const root = Vue.createApp({
            template:`
                <div> 组件1
                    <div>组件</div>
                    <component—childer />    
                </div>
            `
        })
        //定义 全局组件
        root.component(‘component—childer‘,{
            template:` <div> 我是根组件 </div> `
        })
        root.mount(‘#app‘)
    </script>
</body>

__局部组件__:

优缺点：定义后需要注册才能使用，性能较高
命名规范：大写驼峰式命名规则
全局组件的定义：

    <script>
        //<1> 定义 局部组件
        const MyChild = {
            template: ` <div> 我是局部 子组件 </div>`
        }
        const root = Vue.createApp({
            //<2> 定义 components 需要使用的局部组件
            components: {
                MyChild
            },
            template: `
                <div> 组件1
                    <div>组件</div>
                   <MyChild />
                </div>
            `
        })
        root.mount(‘#app‘)
    </script>

<body>
    <div id="app"></div>
    <script>
        const root = Vue.createApp({
            template:`
                <div> 组件1
                    <div>组件</div>
                    <component—childer />    
                </div>
            `
        })
        //定义 全局组件
        root.component(‘component—childer‘,{
            template:` <div> 我是根组件 </div> `
        })
        root.mount(‘#app‘)
    </script>
</body>

Vue基础の组件

原文：https://www.cnblogs.com/Hanro-Z/p/14584371.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)

Vue基础 の 组件

Vue基础の组件