Vue.js基础(五)

1.组件通信

• 父子组件通信
  • 父组件将自己的数据同 v-bind 绑定在 子组件身上
  • 子组件通过 props属性接收

<template id="father">
  <div>
      <h3> 这里是father </h3>
      <Son :money = "money"></Son>
  </div>
</template>

<template id="son">
  <div>
      <h3> 这里是son </h3>
      <p> 我收到了父亲给的  </p>
  </div>
</template>

<script>
Vue.component('Father',{
  template: '#father',
  data () {
    return {
      money: 10000
    }
  }
})

Vue.component('Son',{
  template: '#son',
  props: ['money']
})

new Vue({
  el: '#app'
})
</script>

• props
  • 验证数据类型
  • 验证数据大小【 判断条件 】

 props: ['money']
 props: {
   'money': Number 
    }
 props: {
    'money': {
        validator ( val ) { // 验证函数
            return val > 2000
        }
    }
}

• 子父组件通信
  • 是通过自定义事件
    • 事件的发布
      • 通过绑定元素身上实现
    • 事件的订阅
      • 通过this.$emit触发 // html

    <div id="app">
    <Father></Father>
    </div>
    <template id="father">
    <div>
      <p> 儿子给我发了 {{ xiaojinku }} 的红包 </p>
      <!-- 自定义事件 -->
      <Son @hongbao = "get"/>
    </div>
    
  </template>
  
  <template id="son">
    <div>
      <button @click = "give"> 发红包 </button>
    </div>
  </template>
  
  Vue.component('Father',{
    template: '#father',
    data () {
      return {
        xiaojinku: 0
      }
    },
    methods: {
      get ( val ) {
        this.xiaojinku = val
      }
    }
  })
  Vue.component('Son',{
    template: '#son',
    data () {
      return {
        hongbao: 2000
      }
    },
    methods: {
      give () {
        this.$emit('hongbao',this.hongbao)
      }
    }
  })
  new Vue({
    el: '#app'
  })

• 非父子组件通信
  • ref链
  • bus总线

   <div id="app">
   <Father></Father>
 </div>
 <template id="father">
   <div>
     <h3> father组件 </h3>
     <hr>
     <!-- 使用自定义属性形式将一个方法传递给子组件 -->
     <Girl :kick = "getSon"></Girl>
     <hr>
     <Son ref = "son"></Son>
   </div>
 </template>
 <template id="son">
   <div>
     <h3> son组件 </h3>
     <img v-if = "flag" >
     <img v-else >
   </div>
 </template>
 <template id="girl">
   <div>
     <h3> girl组件 </h3>
     <button @click = "hit"> 揍弟弟 </button>
   </div>
 </template>



 Vue.component('Father',{
   template: '#father',
   methods: {
     getSon () {
       console.log( this )
       this.$refs.son.changeFlag()
     }
   }
 })
 Vue.component('Son',{
   template: '#son',
   /* 组件是独立的，自己的数据自己改 */
   data () {
     return {
       flag: true 
     }
   },
   methods: {
     changeFlag () {
       this.flag = !this.flag 
     }
   }
 })
 Vue.component('Girl',{
   template: '#girl',
   props: ['kick'],
   methods: {
     hit () {
       this.kick()
     }
   }
 })
 new Vue({
   el: '#app'
 })

var bus = new Vue()

Vue.component('Father',{
 template: '#father'
})
Vue.component('Son',{
 template: '#son',
 data () {
   return {
     flag: false
   }
 },
 mounted () { // 也是一个选项，表示组件挂载结束 ， 也就是说我们可以在View视图中看到这个组件了
   // console.log( 'mounted ')
   // bus.$on(自定义事件名称，执行的事件处理程序)
   var _this = this
   bus.$on('cry',function () {
     _this.flag = true
   })

 }
})
Vue.component('Girl',{
 template: '#girl',
 methods: {
   kick () {
     bus.$emit('cry')
   }
 }
})
new Vue({
 el: '#app'
})

2.动态组件

 <div id="app">
    <select name="" id="" v-model = "val">
      <option value="father"> father </option>
      <option value="son"> son </option>
    </select>
    <component :is = "val"></component>
  </div>


  Vue.component('Father',{
    template: '<div> father </div>'
  })
  Vue.component('Son',{
    template: '<div> son </div>'
  })
  new Vue({
    el: '#app',
    data: {
      val: 'father'
    }
  })

3.过渡效果

过渡效果
Vue框架使用css3过渡效果或是js动画
Vue内部提供了一个叫做transition的过渡组件
使用transition包裹过渡元素，那么会自动添加 6 个类名 8个钩子函数

• 默认 类名 开头 v
• 如果有name属性，那么使用 这个name属性值作为类名开头
• 实现方式
  • 在 CSS 过渡和动画中自动应用 class 【 自己写 】
  • 可以配合使用第三方 CSS 动画库，如 Animate.css
  • 在过渡钩子函数中使用 JavaScript 直接操作 DOM
  • 可以配合使用第三方 JavaScript 动画库，如 Velocity.js
• 第一种 [ 在 CSS 过渡和动画中自动应用 class 【 自己写 】 ]
• 第二种： animate.css 【 推荐 】
• 第三种： Vue提供了8个javascript钩子，我们需要自定义js动画
• 第四种： 使用第三方插件： Velocity.js

 <style>
   p{
     width: 100px;
     height: 100px;
     background: red;
   }
 </style>

 <div id="app">
   <button @click = "changeFlag"> changeFlag </button>
   <!-- mode  有两个值   in-out    out-in  -->
   <transition
     name = "xige"
     mode = "in-out"
     enter-active-class = "animated fadeIn"
     leave-active-class = "animated fadeOut"
   >
     <p v-if = "flag"></p>
   </transition>
 </div>


 new Vue({
   el: '#app',
   data: {
     flag: true 
   },
   methods: {
     changeFlag () {
       this.flag = !this.flag 
     }
   }
 })

4.过滤器

• 全局定义

<div id="app">
   <button @click = "getTime"> 获得时间 </button>
   <p> {{ time | timerFilter( '-' ) }} </p>
 </div>

 /* 过滤器 
   全局定义
     Vue.filter(过滤器名称，回调函数)
 */
Vue.filter('timerFilter',function ( val,type ) {
 console.log("兵哥: val", val) //val就是格式化目标的值
  var date = new Date( val )
  if ( val ) {
   return date.getFullYear() + type + (date.getMonth() + 1) + type + date.getDate() 
  } else {
    return ''
  }
})
 new Vue({
   el: '#app',
   data: {
     time: ''
   },
   methods: {
     getTime () {
       this.time = new Date()
     }
   }
 })

• 局部定义

  <div id="app">
   <button @click = "getTime"> 获得时间 </button>
   <p> {{ time | timerFilter }} </p>
 </div>

 /* 过滤器 
   全局定义
     Vue.filter(过滤器名称，回调函数)
 */
 new Vue({
   el: '#app',
   data: {
     time: ''
   },
   methods: {
     getTime () {
       this.time = new Date()
     }
   },
   filters: {
     'timerFilter': function ( val ) {
       var date = new Date( val )
       if ( val ) {
         return date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日'
       } else {
         return ''
       }
     }
   }
 })

5.插槽

<div id="app">
   <Hello> 
       <header slot = "header"> 头部 </header>
       <footer slot = "footer">底部</footer> 
   </Hello>
 </div>
 <template id="hello">
   <div>
     <slot name = "header"></slot>
     <h3> hello组件 </h3>
     <!-- 插槽，给组件的内容预留一个空间 -->
     <slot name = "footer"></slot>
   </div>
 </template>

 Vue.component('Hello',{
   template: '#hello'
 })
 new Vue({
   el: '#app'
 })