004 vue组件

Posted juncaoit

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了004 vue组件相关的知识,希望对你有一定的参考价值。

一:创建组件

1.第一种创建方式

  主要有Vue.extend,Vue.component。

  注释掉的代码是一步一步的推断,后面的代码是简化的代码。

<!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 id="app">
        <!-- 如果要使用组件,直接,把组件的名称,以 HTML 标签的形式,引入到页面中,即可 -->
        <mycom1></mycom1>
    </div>

    <script>
        // 1.1 使用 Vue.extend 来创建全局的Vue组件
        // var com1 = Vue.extend(
        //   template: ‘<h3>这是使用 Vue.extend 创建的组件</h3>‘ // 通过 template 属性,指定了组件要展示的HTML结构
        // )
        // 1.2 使用 Vue.component(‘组件的名称‘, 创建出来的组件模板对象)
        // Vue.component(‘myCom1‘, com1)
        // 如果使用 Vue.component 定义全局组件的时候,组件名称使用了 驼峰命名,则在引用组件的时候,需要把 大写的驼峰改为小写的字母,同时,两个单词之前,使用 - 链接;
        // 如果不使用驼峰,则直接拿名称来使用即可;
        // Vue.component(‘mycom1‘, com1)

        // Vue.component 第一个参数:组件的名称,将来在引用组件的时候,就是一个 标签形式 来引入 它的
        // 第二个参数: Vue.extend 创建的组件  ,其中 template 就是组件将来要展示的HTML内容
        Vue.component(‘mycom1‘, Vue.extend(
            template: ‘<h3>这是使用 Vue.extend 创建的组件</h3>‘
        ))


        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue(
            el: ‘#app‘,
            data: ,
            methods: 
        );
    </script>
</body>

</html>

  效果:

  技术图片

 

2.方式二

  不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素

<!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 id="app">
    <!-- 还是使用 标签形式,引入自己的组件 -->
    <mycom2></mycom2>
  </div>

  <script>
    // 注意:不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素
    Vue.component(‘mycom2‘, 
      template: ‘<div><h3>这是直接使用 Vue.component 创建出来的组件</h3><span>123</span></div>‘
    )

    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue(
      el: ‘#app‘,
      data: ,
      methods: 
    );
  </script>
</body>

</html>

  

3.方式三

  这里包括全局的组件,也包括私有的组件

<!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 id="app">
    <mycom3></mycom3>
    <!-- <login></login> -->
  </div>


  <div id="app2">
    <mycom3></mycom3>
    <login></login>
  </div>

  <!-- 在 被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构  -->
  <template id="tmpl">
    <div>
      <h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮</h1>
      <h4>好用,不错!</h4>
    </div>
  </template>

  <template id="tmpl2">
    <h1>这是私有的 login 组件</h1>
  </template>

  <script>
    Vue.component(‘mycom3‘, 
      template: ‘#tmpl‘
    )

    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue(
      el: ‘#app‘,
      data: ,
      methods: 
    );


    var vm2 = new Vue(
      el: ‘#app2‘,
      data: ,
      methods: ,
      filters: ,
      directives: ,
      components:  // 定义实例内部私有组件的
        login: 
          template: ‘#tmpl2‘
        
      ,

      beforeCreate()  ,
      created()  ,
      beforeMount()  ,
      mounted()  ,
      beforeUpdate()  ,
      updated()  ,
      beforeDestroy()  ,
      destroyed()  
    )
  </script>
</body>

</html>

  

4.组件中的data与方法

<div id="app">
    <mycom1></mycom1>
  </div>

  <script>
    // 1. 组件可以有自己的 data 数据
    // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象,但是 组件中的 data 必须是一个方法
    // 3. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;
    // 4. 组件中 的data 数据,使用方式,和实例中的 data 使用方式完全一样!!!
    Vue.component(‘mycom1‘, 
      template: ‘<h1>这是全局组件 --- msg</h1>‘,
      data: function () 
        return 
          msg: ‘这是组件的中data定义的数据‘
        
      
    )

    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue(
      el: ‘#app‘,
      data: ,
      methods: 
    );
  </script>

  

5.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8   <title>Document</title>
 9   <script src="./lib/vue-2.4.0.js"></script>
10 </head>
11 
12 <body>
13   <div id="app">
14     <counter></counter>
15     <hr>
16     <counter></counter>
17     <hr>
18     <counter></counter>
19   </div>
20 
21 
22   <template id="tmpl">
23     <div>
24       <input type="button" value="+1" @click="increment">
25       <h3>count</h3>
26     </div>
27   </template>
28 
29   <script>
30     var dataObj =  count: 0 
31 
32     // 这是一个计数器的组件, 身上有个按钮,每当点击按钮,让 data 中的 count 值 +1
33     Vue.component(counter, 
34       template: #tmpl,
35       data: function () 
36         // return dataObj
37         return  count: 0 
38       ,
39       methods: 
40         increment() 
41           this.count++
42         
43       
44     )
45 
46     // 创建 Vue 实例,得到 ViewModel
47     var vm = new Vue(
48       el: #app,
49       data: ,
50       methods: 
51     );
52   </script>
53 </body>
54 
55 </html>

  效果:

  技术图片

 

二:组件切换

1.方式1 

<!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 id="app">
    <a href="" @click.prevent="flag=true">登录</a>
    <a href="" @click.prevent="flag=false">注册</a>

    <login v-if="flag"></login>
    <register v-else="flag"></register>

  </div>

  <script>
    Vue.component(‘login‘, 
      template: ‘<h3>登录组件</h3>‘
    )

    Vue.component(‘register‘, 
      template: ‘<h3>注册组件</h3>‘
    )

    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue(
      el: ‘#app‘,
      data: 
        flag: false
      ,
      methods: 
    );
  </script>
</body>

</html>

  

2.方式二

<!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 id="app">
    <a href="" @click.prevent="comName=‘login‘">登录</a>
    <a href="" @click.prevent="comName=‘register‘">注册</a>

    <!-- Vue提供了 component ,来展示对应名称的组件 -->
    <!-- component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称 -->
    <component :is="comName"></component>

    <!-- 总结:当前学习了几个 Vue 提供的标签了??? -->
    <!-- component,  template,  transition,  transitionGroup  -->

  </div>

  <script>
    // 组件名称是 字符串
    Vue.component(‘login‘, 
      template: ‘<h3>登录组件</h3>‘
    )

    Vue.component(‘register‘, 
      template: ‘<h3>注册组件</h3>‘
    )

    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue(
      el: ‘#app‘,
      data: 
        comName: ‘login‘ // 当前 component 中的 :is 绑定的组件的名称
      ,
      methods: 
    );
  </script>
</body>

</html>

  

3.使用mode切换

<!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>
  <style>
    .v-enter,
    .v-leave-to 
      opacity: 0;
      transform: translateX(150px);
    

    .v-enter-active,
    .v-leave-active 
      transition: all 0.5s ease;
    
  </style>
</head>

<body>
  <div id="app">
    <a href="" @click.prevent="comName=‘login‘">登录</a>
    <a href="" @click.prevent="comName=‘register‘">注册</a>

    <!-- 通过 mode 属性,设置组件切换时候的 模式 -->
    <transition mode="out-in">
      <component :is="comName"></component>
    </transition>

  </div>

  <script>
    // 组件名称是 字符串
    Vue.component(‘login‘, 
      template: ‘<h3>登录组件</h3>‘
    )

    Vue.component(‘register‘, 
      template: ‘<h3>注册组件</h3>‘
    )

    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue(
      el: ‘#app‘,
      data: 
        comName: ‘login‘ // 当前 component 中的 :is 绑定的组件的名称
      ,
      methods: 
    );
  </script>
</body>

</html>

  

 

以上是关于004 vue组件的主要内容,如果未能解决你的问题,请参考以下文章

掘金· 发现|Vue.js 的组件化编程 #004

vue基础3--vue组件通信

Vue全局组件与局部组件

vue父子组件之间的通信

vue兄弟组件之间方法调用

Vue组件系统