《前端》vue学习（三）（下）组件--2020年6月14日

最新推荐文章于 2024-07-09 15:34:40 发布

bellediao

最新推荐文章于 2024-07-09 15:34:40 发布

阅读量135

点赞数

分类专栏：前端 VUE.JS 文章标签： vue组件动画组件切换

本文链接：https://blog.csdn.net/bellediao/article/details/106747334

版权

前端同时被 2 个专栏收录

257 篇文章 1 订阅

订阅专栏

VUE.JS

62 篇文章 0 订阅

订阅专栏

组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。
组件化和模块化的不同：
+ 模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
+ 组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用。

1 组件怎么调用？

     <组件名></组件名>

2 全局组件定义的三种方式

2.1 方式1. 使用 Vue.component 配合Vue.extend方法：

var com1= Vue.extend({
template: '<h1>这是使用vue.extend创建的组件</h1>'
});
Vue.component('起一个组件名称', 创建的组件模板对象com1);

或者这种合并写法：

Vue.component('起一个组件名称', Vue.extend({}));

详解见案例：

<body>
  <div id="app">
    <!-- 如果要使用组件，直接，把组件的名称，以 HTML 标签的形式，引入到页面中，即可 -->
    <mycom1></mycom1>
  </div>
  <script>
    // 第一步 使用 Vue.extend 来创建全局的Vue组件
    // var com1 = Vue.extend({
     //   template: '<h3>这是使用 Vue.extend 创建的组件</h3>' 
            // 通过 template 属性，指定了组件要展示的HTML结构
    // })
    // 第二步  使用 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>

2.2 方式2. 使用 Vue.component 配合字面量的方法：

Vue.component('起一个组件名称', {
template: '<h1>使用 Vue.component 配合字面量的方法</h1>'
});

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

2.3 方式3. 将模板字符串，定义到script标签中：

<script id="tmpld" type="x-template">
<div><a href="#">登录</a> | <a href="#">注册</a></div>
</script>

同时，需要使用 Vue.component 来定义组件：
Vue.component('起一个组件名称', {
template: '#tmpld'
});

> 注意：组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！

<body>
  <div id='app'>
    <mycom3></mycom3>
  </div>
    //template 标签下的内容都是模板代码结构
  <template id='temp1'>
    <div>
      <h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮</h1>
      <h4>好用,不错!</h4>
    </div>
  </template>
  <script>
    Vue.component('mycom3',{
      // 像这种在template里面写html字符串的方式容易出错，所以第三种方式采用给template定义一个id，在外部定义html内容
      // template: '<div><h3>这是直接使用 Vue.component 创建出来的组件</h3><span>123</span></div>'
      template:'#temp1'
    })
    // 创建vue实例，得到viewmodel
    var vm = new Vue({
      el: '#app',
      date: {},
      methods: {}
    })
  </script>
</body>

一个组件可以被多个vue实例使用，如mycom3：

<body>
  <div id="app">
    <mycom3></mycom3>
  </div>
  <div id="app2">
    <mycom3></mycom3>
  </div>
  <template id="tmpl">
    <div>
      <h4>你真,不错!</h4>
    </div>
  </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: {}
    })
  </script>
</body>

3 通过在vm实例中的components属性来定义私有组件：

  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
</head>
<body>
  <div id="app2">
    <login></login>
  </div>
  <template id="tmpl2">
    <h1>这是私有的 login 组件</h1>
  </template>
  <script>
    var vm2 = new Vue({
      el: '#app2',
      data: {},
      methods: {},
      filters: {},
      directives: {},
      components: { // 定义实例内部私有组件的
        // login組件，调用方法： <login></login>
        login: {
          template: '#tmpl2'
        }
      }
    })
  </script>
</body>

4 组件中的data和methods：

1. 组件可以有自己的 data 数据。

2. 组件的 data 和实例的 data 有点不一样，实例中的 data 可以为一个对象,但是组件中的 data 必须是一个方法。

3. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象。

4. 组件中的data 数据,使用方式,和实例中的 data 使用方式完全一样!!!

为什么组件的data必须是一个function，且返回对象的问题：

<body>
  <div id="app">
    <counter></counter>
    <hr>
    <counter></counter>
    <hr>
    <counter></counter>
  </div>

  <template id="tmpl">
    <div>
      <input type="button" value="+1" @click="increment">
      <h3>{{count}}</h3>
    </div>
  </template>

  <script>
    var dataObj = { count: 0 }
    // 这是一个计数器的组件, 身上有个按钮,每当点击按钮,让 data 中的 count 值 +1
    Vue.component('counter', {
      template: '#tmpl',
      data: function () {
        // return dataObj  //这个方式不行，dataObj是公用的
        return { count: 0 } //这种方式，返回的对象是对立的
      },
      methods: {
        increment() {
          this.count++
        }
      }
    })

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

5 组件的切换

有三种方式，写在html调用的尖括号里面：

v-if、v-else
component
组件动画

点击按钮，切换对应按钮的组件：

5.1 v-if、v-else

也就是通过false和true的方式完成组件切换。

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

5.2 component

Vue提供了 component，来展示对应名称的组件。
component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称。
comName是一个活的变量，在click事件中进行赋值不同的组件名称。

<body>
  <div id="app">
    <a href="" @click.prevent="comName='login'">登录</a>
    <a href="" @click.prevent="comName='register'">注册</a>
    <!--注意comName里面用单引号-->
    <component :is="comName"></component>

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

3、动画

通过设置css过渡实现动画，另外 <transition> 中使用 mode=‘out-in’。

<style>
    /* 实现动画的两类style */
    /* 动画分为两个过程enter和leave，
      两个过程各有两个时间节点：v-enter、v-enter-to和v-leave、v-leave——to */
    .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 属性,设置组件切换时候的 模式
      mode="out-in 先出去另一个再进来"-->
    <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>

<transition>是一个用于动画过度的属性。具体用法我写在：《前端》css之transition里面。

将在vue学习(四)中介绍父组件和子组件传值问题：

https://blog.csdn.net/bellediao/article/details/106750081

--------

(别人的分享)二、vue组件化开发（轻松入门vue）_莫逸风的博客-CSDN博客_vue组件化 https://blog.csdn.net/qq_38723677/article/details/105539704