Vue中的局部组件

最新推荐文章于 2023-05-09 11:00:16 发布

huxiaoxiao.

最新推荐文章于 2023-05-09 11:00:16 发布

阅读量726

点赞数

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/lolhuxiaotian/article/details/121509236

版权

vue 专栏收录该内容

65 篇文章 2 订阅

订阅专栏

在Vue中我们可以自己定义(注册)局部组件

定义组件名的方式：

var ComponentA = { /* ... */ }

var ComponentB = { /* ... */ }

然后在 components 选项中定义你想要使用的组件：

new Vue({
  el: '#app',

// 组件中心
  components: {
 // 在视图层渲染 局部注册组件时
  // component-a：你要在视图层调用时使用的名称
  // ComponentA：  局部注册组件名称
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

在视图层调用局部组件：

<div id="app">
        <component-a></component-a>
        <component-b></component-b>
    </div>

举个列子：

<body>
    
    <div id="app">
        <component-a></component-a>
        <component-b></component-b>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        let componentA = {
            template:`
                <p>我是局部组件1</p>
            `
        }

        let componentB = {
            template:`
                <p>我是局部组件2</p>
            `
        }

        let vm = new Vue({
            el:'#app',
            data:{

            },
            components:{
                "component-a":componentA,
                "component-b":componentB
            }
        })
    </script>

输出结果为：

huxiaoxiao.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的局部组件

在Vue中我们可以自己定义(注册)局部组件定义组件名的方式：var ComponentA = { /* ... */ }var ComponentB = { /* ... */ }然后在components选项中定义你想要使用的组件：new Vue({ el: '#app',// 组件中心 components: { // 在视图层渲染局部注册组件时 // component-a：你要在视图层调用时使用的名称 // ComponentA：局部注册组件名称..
复制链接

扫一扫