Vue中的局部组件介绍_JavaScript

上一篇: JavaScript阻止事件冒泡的方法下一篇:JavaScript数据扁平化详解

Vue中的局部组件介绍

发布时间：2022-04-16 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了Vue中的局部组件介绍，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

在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>

输出结果为：

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的Vue中的局部组件介绍全部内容，希望文章能够帮你解决Vue中的局部组件介绍所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：

上一篇: JavaScript阻止事件冒泡的方法下一篇:JavaScript数据扁平化详解

猜你在找的JavaScript相关文章

html font标签如何设置字体大小？html font标签属性用法介绍 2022-05-16
vue3+TypeScript+vue-router的使用方法 2022-04-16
vue3获取当前路由地址 2022-04-16
如何利用React实现图片识别App 2022-04-16
JavaScript展开运算符和剩余运算符的区别详解 2022-04-16
微信小程序中使用vant框架的具体步骤 2022-04-16
Vue elementUI表单嵌套表格并对每行进行校验详解 2022-04-16
如何利用Typescript封装本地存储 2022-04-16
微信小程序中wxs文件的一些妙用分享 2022-04-16
JavaScript的Set数据结构详解 2022-04-16