博客

Vue组件component创建及使用

  • Post author:
  • Post category:vue



Vue组件component创建及使用

组件化与模块化的区别

什么是组件：组件的出现，就是为了拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块

，将来我们需要什么功能，就可以去调用对应的组件即可

组件化与模块化的不同：

模块化：是从代码逻辑的角度进行分析，方便代码分层开发，保证每个功能模块的只能单一

组件化：是从UI界面的角度进行划分，前端的组件化，方便UI组件的重用。

复制代码 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    
    <div class="app">
        <!-- 引用组件的名称 -->
        <login></login>  
        <login2></login2>
        <login3></login3>
        <hr>
        <login6></login6>
    </div>



    <!-- 注意 这里的id是必须的，不要在实例控制中的divcalss app 中去写template -->
    <template id="login3">
            <div>
                <h2>我是第三种方式创建出来的</h2>
            </div>
    </template>

<!-- Vue实例 -->
    <script>
        // Component 组件的创建
        // 注意  template 中的容器 只能有一个父元素，不能包含两个 你可以用一个div包裹
        // 第一种创建全局组件
        // extend是注册组件函数，他返回一个对象
       var comobj= Vue.extend({
            template:"<h1>我是全局组件</h1>"
        })
        // component函数提交组件，第一个参数为组件的名称，第二个参数是一个注册组件的对象
        Vue.component("login",comobj)   


        
        // 第二种创建方式
        // component 中直接写上一个模板对象
        Vue.component('login2',{template:'<h1>我是第二种v创建出来的组件</h1>'});



        // 第三种创建的方式 首先在元素中创建一个template模板
        Vue.component('login3',{template:'#login3'})

    var vm=new Vue({
        el:'.app',
        data:{},
        // 定义私有组件 和全局差不多 组件名称和对象，也可以使用template模板来创建
        components:{
            login6:{template:'#login3'}
            
            
        }
    })
    
    </script>
</body>
</html>

复制代码

组件的引用可以使用组件的名字直接引用 也可以使用Vue给我们提供的的元素

Vue 提供了component，来展示对应名称的组件

component是一个占位符，:is属性可以用来指定要展示的组件名称

<compnent :is=”comName” ></component>

复制代码 

    <div class="app">
        <login></login>
        <login2></login2>
        <!-- 使用component 占位符来展示组件 -->
        <!-- 注意 :is 是绑定的属性，需要在实例的data中绑定的 组件的名称是字符串 -->
        <!-- 其中 他还提供了 mode属性来切换动画的先进先出的问题  -->
        <component :is="login='login'" mode="out-in"></component>
    </div>

复制代码