vue基础4

组件化规范：web components

  Vue.component('button-counter'(组件名称), {

     （组件的属性） data: function(){

        return { count: 0  } },（提供一个具体的对象）

      template: '<button @click="handle">点击了{{count}}次</button>'（模板内容）

 组件注册注意事项

      1、组件参数的data值必须是函数

      2、组件模板必须是单个跟元素

      3、组件模板的内容可以是模板字符串

 组件注册注意事项:

      如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，但是

    在普通的标签模板中，必须使用短横线的方式使用组件

局部组件注册   局部组件只能在注册他的父组件中使用

props:接收副组件传来的值相当于data

例：:title="ptitle" tip="hellobaby"

子组件需要定义components

$emit (""):子组件向父组件传递信息，父组件：v-on:("子组件传来的值")，兄弟组件也可以用，用在event$hub中对兄弟值的传递

var eventHub=new Vue():进行事件的监听和销毁

eventHub$on事件的监听eventHub$off事件销毁

触发事件eventHUb$mint

插槽： 默认用法：<slot>默认内容</slot>插槽的内容由自定义的子组件进行传递内容

<slot name="ok">内容</slot>:在子组件

父组件<base-name >

<p class="ok">内容</p>

</base-name>

父组件：<template slot-scope='slotProps'>：（slot-scope,这是特殊名称必写，可以得到子组件绑定的属性）

        <strong v-if='slotProps.info.id==3' class="current">{{slotProps.info.name}}</strong>

        <span v-else>{{slotProps.info.name}}</span>

      </template>

 子组件：<slot :info='item'>{{item.name}}</slot>（info绑定的值）