vue学习四，组件（慕课网学习笔记）

1.组件划分

功能模块：select，pagenation...

页面区域：header，footer，sidebar...

2.组件注册

header.vue和footer.vue文件，在App.vue中引用注册

import Header from './header'
import Footer from './footer'

new Vue({  
  components: { Header,Footer }
})

在内容中使用组件<header></header>

3.组件通信

//this is header.vue（子组件）
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>{{ msgfromfather }}</h1>
    <button v-on:click="onClickMe">click!</button>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      msg: 'in component',
    }
  },
  props:['msgfromfather'],//定义一个属性
  methods:{
    onClickMe:function(){
      console.log(this.msgfromfather);//获取父组件传的值
      this.$emit('child-tell-me-something',this.msg);//调用定义的方法，向父组件传值（方法一）
      this.$dispatch('child-tell-me-somthing',this.msg);//由里向外传值（方法二）
    }
  }
}
</script>

<!--this is app.vue（父组件）-->
<!--msg属性给组件传值（父组件向子组件传值）,v-on监听定义的方法获取子组件传的值（子组件向父组件传值-方法一）-->
<p>child tell me:{{childWords}}</p>
<header msgfromfather="you die!" v-on:child-tell-me-somthing='listenToMyBoy'></header>
<script>
import Com from './components/com'//引用
export default {
  data () {
    return {
       title: 'Todos -Vuejs',
       childWords:''//预先定义值为空
    }
  },
  components:{Com},//注册组件
  method:{
    //定义监听子组件传值（方法一）     
    listenToMyBoy:function(msg){
        this.childWords=msg;
     }
  },
//注册监听传值方法（方法二）
  events:{
     'child-tell-me-somthing':function(){
        this.childWords=msg;
     }
  },
  }
</script>

this.$emit():在它上面触发

this.$dispatch(): 由里向外传递，子向父

this.$boradcast(): 由外向里传递，广播，父向子