Vue 中slot 过滤器 自定义事件 props验证

slot 插槽

作用/概念: 预先将将来要使用的内容进行保留

具名插槽slot（Vue2.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>
<script>
Vue.component('Hello',{
template: '#hello'
})
new Vue({
el: '#app'
})
</script>

作用域插槽 slot-scope

<div id="app">
    <Hello>
      <template slot = "default" slot-scope = "slotProp">
        <p> {{ slotProp.msg }} </p>
      </template>
    </Hello>
  </div>
  <template id="hello">
    <div>
      <slot name = "default" :msg = "msg"></slot>
    </div>
  </template>
  <script>
  Vue.component('Hello',{
    template: '#hello',
    data () {
      return {
        msg: 'hello'
      }
    }
  })

Vue.2.6版本
slot

<div id="app">
    <Hello>
      <template v-slot:header>
        <h1>Here might be a page title</h1>
      </template>
    
      <p>A paragraph for the main content.</p>
      <p>And another one.</p>
    
      <template v-slot:footer>
        <p>Here's some contact info</p>
      </template>
    </Hello>
  </div>
  <template id ='hello'>
    <div class="container">
      <header>
        <!-- 我们希望把页头放这里 -->
        <slot name = "header"></slot>
      </header>
      <main>
        <!-- 我们希望把主要内容放这里 -->
      </main>
      <footer>
        <!-- 我们希望把页脚放这里 -->
        <slot name = 'footer'></slot>
      </footer>
    </div>
  </template>
  <script>


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


  new Vue({
    el: '#app',
    data: {
      msg: '<h3> hello </h3>'
    }
  })
</script>

作用域插槽

<div id="app">
    <Hello>
      <template v-slot:default = "slotProp">
        {{ slotProp.msg }}
      </template>
    </Hello>
  </div>
  <template id="hello">
    <div>
      <slot name = "default" :msg = "msg"></slot>
    </div>
  </template>
<script>
  new Vue({
    components: {
      'Hello': {
        template: '#hello',
        data () {
          return {
            msg: 'hello'
          }
        }
      }
    }
  }).$mount('#app')

自定义事件
1.自定义的事件 通过 $on 定义 $emit触发

var vm = new Vue({
      el: '#app'
      })


      // 自定义事件的定义（ 发布 ）


      // vm.$on(自定义事件的名称，自定义事件的事件处理程序)


      vm.$on( 'aa', function () {
      console.log( 'aa' )
      })

      //自定义事件的触发 （ 订阅 ）

      // vm.$emit( 自定义事件的名称，自定义事件处理程序需要的参数1，参数2，参数3)


      vm.$emit( 'aa' )

2. 通过绑定在组件身上定义，通过 $emit触发

属性验证

1. props: [ ‘msg’ ] 没有进行验证，知识单纯的接收了一个父组件传递来的数据
2. props: { attr: attrType } 进行普通属性验证
3. props: { type: typeType, default: value } 这里的default是为这个属性设置初始值
4. props: { validator ( val ) { return boolean }} 可以进行一个条件的比较

<div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <h3> 这里是父组件 </h3>
      <Son :money = "money" :n = "n"></Son>
    </div>
  </template>
  <template id="son">
    <div>
      <h3> 这里是子组件 </h3>
      <p> 父亲给了我  {{ money + 100}}  钱  </p>
      <p> num: {{ num }} </p>
    </div>
  </template>
<script>
    /*
    父子组件通信会使用到 props
  */
  Vue.component('Father',{
    template: '#father',
    data () {
      return {
        money: 1000,
        n: 400
      }
    }
  })
  Vue.component('Son',{
    template: '#son',
    props: {
      // key: value   key就是我们接收的属性    value就是我们想要的这个属性的数据类型
      'money': Number, // String   Boolean       Object...
      'n': {
        validator ( val ) { //属性验证函数，一般常用于条件的比较
          // val 就是我们得到的数据
          return  val > 300 //返回值是一个布尔值
        }
      },
      'num': {
        type: Number,
        default:200
      }
    }
  })
  new Vue({
    el: '#app'
  })
</script>

过滤器

过滤器：用来格式化数据的一个函数

全局定义过滤器

<p> {{ time | timeFilter('/)}} </p>
<script>
     Vue.filter('timeFilter',function ( val,type ) {
        console.log( val )
        //val 就是我们获得的数据
        // return newVal   return 的结果就是格式化之后的新数据  return的结果就是页面呈现的结果


        var date = new Date ( val )


        // 2019-6-26


        return date.getFullYear() + type + ( date.getMonth() + 1 ) + type + date.getDate()
</script>

局部定义过滤器

<p> {{ time | timeFilter('/)}} </p>

<script>
     new Vue({
      el: '#app',
      data: {
        time: Date.now()
      },
      filters: { //过滤器的配置项
        'timeFilter': function ( val,type ){
          var date = new Date ( val )
          return date.getFullYear() + type + ( date.getMonth() + 1 ) + type + date.getDate()
        }
      }
    })
</script>