vue学习简要概括2

1、自定义组件，外部组件响应内部组件事件，并且返回数据

//全局注册一个组件
 Vue.component('button-counter', {

  //自定义属性，可用于对组件内部传值
  props: ["name"],

  //data必须是一个函数
  data: function () {
    return {
      count: 0
    }
  },
  //通过$emit发送点击事件给responsefun函数，在第二个参数中是发送给父组件的内容,并且可以使用插槽
  template: `
  <div>
    <button v-on:click="$emit('responsefun','发送给父组件')">触发</button><br>
    <slot></slot>    
    <button v-on:click="count++">You clicked me {{ count }} times.</button>
    </div>
`
})


<!--自定义组件的内部点击后触发到父组件中，在内部可以放其他的标签，因为使用了插槽-->
<button-counter name="啦啦啦"
                    v-on:responsefun='triggerFun'>
     <p>我是插槽内的内容</p>
</button-counter>

methods: {
      //会将子组件中的返回的内容返回到这里
      triggerFun(res){
        console.log("触发函数"+res)
      },
    }

2、动态组件，达到切换component的效果。注意currentComonent是表示组件的名称，是个变量。不能直接将组件的名称放在这里。传递参数的形式为name=‘xx’

<!-- 组件会在 `currentTabComponent` 改变时改变，使用v-bind:或v-on:等后面必须是一个变量，不能是一个具体的值 
       使用了 is 特性来切换不同的特性
-->
<component v-bind:is="currentComponet" name="拉拉"  v-on:responsefun='triggerFun'></component>

使用keep-alive标签，那么就组件在第一次创建的时候就会被缓存下来。不会在切换组件的时候重新创建。
<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

3、局部定义一个组件

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
然后在 components 选项中定义你想要使用的组件：

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

注意局部注册的组件在其子组件中不可用。例如，如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：

var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}
或者：

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  },
  // ...
}

4、transition动画的使用 这个transition要配合v-show v-if来进行使用。enter对应着元素出现的过程，而leave对应着元素消失的过程。

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <!--要记得是使用name属性-->
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

在进入/离开的过渡中，会有 6 个 class 切换。

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

v-enter-active：（动画的进入的过程）定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

v-leave-active：（动画离开过渡的过程）定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

5.自定义过渡的类名，也就是利用第三方的动画库的方式。

自定义过渡的类名
我们可以通过以下 attribute 来自定义过渡类名：

enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)
他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。

示例：

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

<div id="example-3">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>
</div>