组件通信

父通子 Props Down

父组件给子组件传递数据通过props来传递
+ 先在父组件中往子组件标签上添加属性传递数据
+ 在子组件中声明props来接收父组件传递的数据
+ 然后在子组件中就可以直接通过this来访问props中的数据了
注意：prop是单向绑定的：当父组件的属性变化时，将传导给子组件
但反过来不会

子传父 Events Up

• 子组件在内部通过this.$emit(自定义事件名称[,可选参数]) 发布事件
• 父组件在使用子组件的标签上通过@自定义事件名称=”事件处理函数”的方式来订阅子组件内部发布的事件

• 这样的话，当子组件内部this.$emit的时候，则父组件订阅的自定义事件就会执行

  案例：封装分页组件

index.html

 <div id="app">
      <wf-pagiation 
      @current-change="handleCurrentChange" //监听子组件的事件（）
      :proCurrentPage="1"   //父传子
      :page-size="pageSize" //父传子
      :total="totalCount" > //父传子
    </wf-pagiation>
  </div>

index.js

  <script>
    Vue.component('wf-pagiation',{
        props:{  //接收父组件的参数
            pageSize:{
                type:Number,
                required:true
            },
            total:{
                type:Number,
                required:true
            },
            proCurrentPage:{
                type:Number,
                default:1
            }
        },
        data(){
            return {
                currentPage:this.proCurrentPage
            }
        },
        computed:{
            totalPage(){
                return Math.ceil(this.total/this.pageSize)
            }
        },
        methods:{
            getCurrentPage(page){
                if(page<=0){
                    page=1
                }
                if(page>=this.totalPage){
                    page=this.totalPage
                }
               this.currentPage=page
               this.$emit('current-change',page) //发布事件，通知父组件
            }
        },
        template:`
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li>
                <a href="#" aria-label="Previous" @click.prevent="getCurrentPage(currentPage-1)">
                    <span aria-hidden="true">&laquo;</span>
                </a>
                </li>
                <li v-for="n in totalPage"><a href="#" @click.prevent="getCurrentPage(n)">{{n}}</a></li>
                <li>
                <a href="#" aria-label="Next" @click.prevent="getCurrentPage(currentPage+1)">
                    <span aria-hidden="true">&raquo;</span>
                </a>
                </li>
            </ul>
        </nav>
        `
    })

    new Vue({
        el:'#app',
        data:{
            totalCount:60,
            pageSize:5
        },
        methods:{
            handleCurrentChange(n){ //订阅事件的回调函数
                console.log('ha',n)
            }
        }
    })
  </script>