zoukankan      html  css  js  c++  java
  • vue -全局组件和局部组件

    1、全局组件:Vue.component('标签名', 构造器名) 

    Vue.component('mycpn', cpnC)

    注:这种注册组件的方式是全局组件,可以在多个Vue实例中使用。

    2、局部组件:components:{标签名,构造器名}

    components: {
                    mycpn: cpnC
                }

    注:这种注册组件的方式是局部组件,只能在注册这个组件的Vue实例中使用。

    *******完整代码******‘

    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="../js/vue.js"></script>
    </head>
    <div id="app">
        <mycpn />
    </div>
    <div id="app2">
        <mycpn />
    </div>
    
    <body>
        <script>
            const cpnC = Vue.extend({
                template: `
                    <h2>全局组件,可以在多个Vue实例中使用</h2>
                `
            })
            // Vue.component('mycpn', cpnC)
            //这种注册组件的方式是全局组件,可以在多个Vue实例中使用。
    
            let vm = new Vue({
                el: '#app',
                components: {
                    mycpn: cpnC
                }
                //这种注册组件的方式是局部组件,只能在注册这个组件的Vue实例中使用。
            })
            let vm2 = new Vue({
                el: '#app2'
            })
        </script>
    </body>
    
    </html>

    注:实际开发中,只有一个Vue实例,常用的组件是局部组件

  • 相关阅读:
    五:DockerFile制作Docker镜像
    六:Docker生产案例
    集群基础知识及haproxy负载均衡
    nfs服务部署记录
    haproxy 1.8.X版本编译安装教程
    Centos7.4安装kvm虚拟机
    什么是Docker
    Python—操作redis
    Python—redis
    机器学习之梯度下降法
  • 原文地址:https://www.cnblogs.com/DreamchaserHe/p/11759877.html
Copyright © 2011-2022 走看看