// section父組件
<template>
  <div class="section">
    <com-article :articles="articleList"></com-article>
  </div>
</template>
<script>
import comArticle from './test/article.vue'
export default {  name: 'HelloWorld',  components: { comArticle },  data() {    return {      articleList: ['紅樓夢', '西游記', '三國演義']    }  }}
</script>
// 子組件 article.vue
<template>
  <div>
    <span v-for="(item, index) in articles" :key="index">{{item}}</span>
  </div>
</template>
<script>
export default {  props: ['articles']}
</script>

// 父組件中
<template>
  <div class="section">
    <com-article :articles="articleList" @onEmitIndex="onEmitIndex"></com-article>
    <p>{{currentIndex}}</p>
  </div>
</template>
<script>
import comArticle from './test/article.vue'
export default {  name: 'HelloWorld',  components: { comArticle },  data() {    return {      currentIndex: -1,      articleList: ['紅樓夢', '西游記', '三國演義']    }  },  methods: {    onEmitIndex(idx) {      this.currentIndex = idx    }  }}
</script>
<template>
  <div>
    <div v-for="(item, index) in articles" :key="index" @click="emitIndex(index)">{{item}}</div>
  </div>
</template>
<script>
export default {  props: ['articles'],  methods: {    emitIndex(index) {      this.$emit('onEmitIndex', index)    }  }}
</script>

// 父組件中
<template>
  <div class="hello_world">
    <div>{{msg}}</div>
    <com-a></com-a>
    <button @click="changeA">點(diǎn)擊改變子組件值</button>
  </div>
</template>
<script>
import ComA from './test/comA.vue'
export default {
  name: 'HelloWorld',
  components: { ComA },
  data() {
    return {
      msg: 'Welcome'
    }
  },
  methods: {
    changeA() {
      // 獲取到子組件A
      this.$children[0].messageA = 'this is new value'
    }
  }
}
</script>
// 子組件中
<template>
  <div class="com_a">
    <span>{{messageA}}</span>
    <p>獲取父組件的值為:  {{parentVal}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      messageA: 'this is old'
    }
  },
  computed:{
    parentVal(){
      return this.$parent.msg;
    }
  }
}
</script>

// A.vue
<template>
  <div>
    <comB></comB>
  </div>
</template>
<script>
  import comB from '../components/test/comB.vue'
  export default {
    name: "A",
    provide: {
      for: "demo"
    },
    components:{
      comB
    }
  }
</script>
// B.vue
<template>
  <div>
    {{demo}}
    <comC></comC>
  </div>
</template>
<script>
  import comC from '../components/test/comC.vue'
  export default {
    name: "B",
    inject: ['for'],
    data() {
      return {
        demo: this.for
      }
    },
    components: {
      comC
    }
  }
</script>
// C.vue
<template>
  <div>
    {{demo}}
  </div>
</template>
<script>
  export default {
    name: "C",
    inject: ['for'],
    data() {
      return {
        demo: this.for
      }
    }
  }
</script>

// 子組件 A.vue
export default {
  data () {
    return {
      name: 'Vue.js'
    }
  },
  methods: {
    sayHello () {
      console.log('hello')
    }
  }
}
// 父組件 app.vue
<template>
  <component-a ref="comA"></component-a>
</template>
<script>
  export default {
    mounted () {
      const comA = this.$refs.comA;
      console.log(comA.name);  // Vue.js
      comA.sayHello();  // hello
    }
  }
</script>

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

// main.js 
Vue.prototype.$bus=new Vue() // 在Vue的原型上掛載事件總線
// 這種方式在使用事件總線的時候不需要在每個組件中導(dǎo)入bus,
// 使用this.$bus.emit('自定義事件1',要傳入的值)傳值
// 使用this.$bus.$on('自定義事件1',(val)=>{})接收  val是傳入的值

<template>
  <div>
    <show-num-com></show-num-com>
    <addition-num-com></addition-num-com>
  </div>
</template>
<script>
import showNumCom from './showNum.vue'
import additionNumCom from './additionNum.vue'
export default {
  components: { showNumCom, additionNumCom }
}
</script>
// addtionNum.vue 中發(fā)送事件
<template>
  <div>
    <button @click="additionHandle">+加法器</button>    
  </div>
</template>
<script>
import {EventBus} from './event-bus.js'
console.log(EventBus)
export default {
  data(){
    return{
      num:1
    }
  },
  methods:{
    additionHandle(){
      EventBus.$emit('addition', {
        num:this.num++
      })
    }
  }
}
</script>

// showNum.vue 中接收事件
<template>
  <div>計(jì)算和: {{count}}</div>
</template>
<script>
import { EventBus } from './event-bus.js'
export default {
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    EventBus.$on('addition', param => {
      this.count = this.count + param.num;
    })
  }
}
</script>

import { eventBus } from 'event-bus.js'
EventBus.$off('addition', {})

// 在B組件頁面中添加以下語句，在組件beforeDestory的時候銷毀。
beforeDestroy () {
    bus.$off('get', this.myhandle)
},

// 父組件
<template>
  <div id="app">
    <ChildA/>
    <ChildB/>
  </div>
</template>
<script>
  import ChildA from './components/ChildA' // 導(dǎo)入A組件
  import ChildB from './components/ChildB' // 導(dǎo)入B組件
  export default {    name: 'App',    components: {ChildA, ChildB} // 注冊A、B組件
  }
</script>
// 子組件childA
<template>
  <div id="childA">
    <h1>我是A組件</h1>
    <button @click="transform">點(diǎn)我讓B組件接收到數(shù)據(jù)</button>
    <p>因?yàn)槟泓c(diǎn)了B，所以我的信息發(fā)生了變化：{{BMessage}}</p>
  </div>
</template>
<script>
  export default {    data() {      return {        AMessage: 'Hello，B組件，我是A組件'
      }    },    computed: {      BMessage() {        // 這里存儲從store里獲取的B組件的數(shù)據(jù)
        return this.$store.state.BMsg
      }    },    methods: {      transform() {        // 觸發(fā)receiveAMsg，將A組件的數(shù)據(jù)存放到store里去
        this.$store.commit('receiveAMsg', {          AMsg: this.AMessage
        })      }    }  }
</script>
// 子組件 childB
<template>
  <div id="childB">
    <h1>我是B組件</h1>
    <button @click="transform">點(diǎn)我讓A組件接收到數(shù)據(jù)</button>
    <p>因?yàn)槟泓c(diǎn)了A，所以我的信息發(fā)生了變化：{{AMessage}}</p>
  </div>
</template>
<script>
  export default {    data() {      return {        BMessage: 'Hello，A組件，我是B組件'
      }    },    computed: {      AMessage() {        // 這里存儲從store里獲取的A組件的數(shù)據(jù)
        return this.$store.state.AMsg
      }    },    methods: {      transform() {        // 觸發(fā)receiveBMsg，將B組件的數(shù)據(jù)存放到store里去
        this.$store.commit('receiveBMsg', {          BMsg: this.BMessage
        })      }    }  }
</script>

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
  // 初始化A和B組件的數(shù)據(jù)，等待獲取
  AMsg: '',
  BMsg: ''
}
const mutations = {
  receiveAMsg(state, payload) {
    // 將A組件的數(shù)據(jù)存放于state
    state.AMsg = payload.AMsg
  },
  receiveBMsg(state, payload) {
    // 將B組件的數(shù)據(jù)存放于state
    state.BMsg = payload.BMsg
  }
}
export default new Vuex.Store({
  state,
  mutations
})

//父組件
<div>
     <h3>父組件</h3>
     <testChild>
         <div>默認(rèn)插槽</div>
     </testChild>
</div>
//子組件 testChild
<div>
    <h4>子組件</h4>
    <slot></slot> //default slot
</div>

/* 父組件 
* list: [
*    {name: "aaa"}, {name: "bbb"}
* ]
*/
<div>
        <h3>父組件</h3>
        <testChild>
            <template v-slot:test>//v-slot: + 插槽名 v-slot:default 也是允許的
                <ul>
                    <li v-for="item in list">{{item.name}}</li>
                </ul>
            </template>
        </testChild>
    </div>
//子組件 textChild
 <div>
        <h4>子組件</h4>
        <slot name="test"></slot> //name="插槽名"
</div>

//父組件 
 <div>
        <h3>父組件</h3>
        <testChild>
            <template v-slot:test="data">//具名插槽，v-slot: +插槽名+ ="自定義數(shù)據(jù)名"，子組件所傳參數(shù)都是其屬性
                <ul>
                    <li v-for="item in data.list2">{{item.name}}</li>
                </ul>
            </template>
            <template v-slot="dataDefalut">//默認(rèn)插槽
                {{dataDefalut.sName}}
            </template>
        </testChild>
    </div>
//子組件
<template>
    <div>
        <h4>子組件</h4>
        <slot name="test" :list2="list2"></slot>
        <slot :sName="name"></slot>
    </div>
</template>