<script>
export default {
	//使用方式一
    props:["count"],
    //使用方式二
    props:{
        count:{
        	//type:類型規(guī)定
            type:Number,
            //default:默認(rèn)值
            default:0,
            //require:是否是必傳
            require:true,
        }
    },
}
</script>

//父組件
<template>
  <div style="outline:1px solid red">
    <h1>我是父組件</h1>
    <button @click="count+=1">要傳遞的值{{count}}</button>
    //第三步通過(guò)v-bind動(dòng)態(tài)傳入子組件
    <Child :count="count"></Child>
  </div>
</template>

<script>
//第一步導(dǎo)入組件
import Child from "../child/index.vue"
export default {
//第二步組件注冊(cè)
    components:{
        Child,
    },
    data () {
    return {
      count: 1
    }
  }
}

//子組件
<template>
  <div style="outline:1px solid green">
    <h1>我是子組件</h1>
    // 第二步在頁(yè)面中使用
    <div>接收父組件傳值:{{count}}</div>
  </div>
</template>

<script>
export default {
	//第一步利用 props 接收
	//可以直接在頁(yè)面中使用,但不可修改;修改需要先將 props 中的數(shù)據(jù)賦值給 data 中的變量
	// props:["count"],
    props:{
        count:{
            type:Number,
            default:0,
            require:true,
        }
    },
}

//子組件
<template>
  <div style="outline:1px solid green">
    <h1>我是子組件</h1>
    <button @click="give">傳遞給父組件</button>
  </div>
</template>

<script>
export default {
  methods:{
    give(){
	 //第一步調(diào)用 $emit 傳遞參數(shù)
	 //emit 中第一個(gè)參數(shù)是在父頁(yè)面中接收的 事件名稱
	 //emit 中第二個(gè)嘗試是要傳遞的數(shù)據(jù)
      this.$emit("child",`我是子組件值+ ${new Date().getTime()}`)
    }
  }
}

// 父組件
<template>
  <div style="outline:1px solid red">
    <h1>我是父組件</h1>
       <div>我是接收子組件的值:{{this.childValue}}</div>
       // 第一步在子組件中自定義事件接收 emit 傳遞的事件
    <Child :count="count" @child="accept"></Child>
  </div>
</template>

<script>
import Child from "../child/index.vue"
export default {
    components:{
        Child,
    },
    data () {
    return {
      childValue:"",
    }
  },
  methods:{
  	// 第二步在事件接收使用 子組件的傳值
    accept(obj){
      this.childValue = obj
    }
  }
}

// component 文件夾中新建 eventBus.js 文件,用來(lái)實(shí)現(xiàn)兄弟組件通信
import Vue from "vue";

export default new Vue()

// 組件 A
<template>
 <div style="width: 100%; height: 100px; outline: 1px solid red">
   <button @click="send">A組件給B組件傳值</button>
 </div>
</template>

<script>
import bus from "../eventBus";
export default {
 methods: {
   send() {
     bus.$emit("share", `我是A組件+ ${new Date().getTime()}`);
   },
 },
};
</script>

<style lang="less" scoped>
</style>

// 組件 B
<template>
    <div style="width:100%;height:100px;outline:1px solid green">
        接收A組件的值{{this.accept}}
    </div>
</template>

<script>
import bus from "../eventBus"
    export default {
        data(){
            return{
                accept:''
            }
        },
        mounted(){
            bus.$on("share",val=>{
                this.accept = val
            })
        }
 }
</script>