纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

Vue中的局部组件 Vue中的局部组件介绍

huxiaoxiao.   2021-12-03 我要评论
想了解Vue中的局部组件介绍的相关内容吗,huxiaoxiao.在本文为您仔细讲解Vue中的局部组件的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Vue中的局部组件,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>


输出结果为:


相关文章

猜您喜欢

  • JavaScript阻止事件冒泡 JavaScript阻止事件冒泡的方法

    想了解JavaScript阻止事件冒泡的方法的相关内容吗,bear*6在本文为您仔细讲解JavaScript阻止事件冒泡的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:JavaScript阻止事件冒泡,JavaScript,阻止事件冒泡,下面大家一起来学习吧。..
  • Python Pyqt5多线程更新UI PythonPyqt5多线程更新UI代码实例(防止界面卡死)

    想了解PythonPyqt5多线程更新UI代码实例(防止界面卡死)的相关内容吗,幸福的达哥在本文为您仔细讲解PythonPyqt5多线程更新UI的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:PythonPyqt5多线程更新UI,PythonPyqt5多线程,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.orsoft.cn 【OR下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式