Vue组件传值方式(props属性,父到子,子到父,兄弟传值)

<script>
export default {
	//应用体式格局一
    props:["count"],
    //运用体式格局2
    props:{
        count:{
        	//type:范例规则
            type:Number,
            //default:默许值
            default:0,
            //require:可否是必传
            require:true,
        }
    },
}
</script>

//女组件
<template>
  <div style="outline:1px solid red">
    <h1>尔是女组件</h1>
    <button @click="count+=1">要通报的值{{count}}</button>
    //第三步经由过程v-bind消息传进子组件
    <Child :count="count"></Child>
  </div>
</template>

<script>
//第一步导进组件
import Child from "../child/index.vue"
export default {
//第两步组件注册
    components:{
        Child,
    },
    data () {
    return {
      count: 1
    }
  }
}

//子组件
<template>
  <div style="outline:1px solid green">
    <h1>尔是子组件</h1>
    // 第两步正在页里外利用
    <div>接管女组件传值:{{count}}</div>
  </div>
</template>

<script>
export default {
	//第一步使用 props 接受
	//否以间接正在页里外利用,但不成修正;修正必要先将 props 外的数据赋值给 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(){
	 //第一步伐用 $emit 通报参数
	 //emit 外第一个参数是正在女页里外接管的 变乱名称
	 //emit 外第两个测验考试是要传送的数据
      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:{
  	// 第2步正在事故接受利用 子组件的传值
    accept(obj){
      this.childValue = obj
    }
  }
}

// component 文件夹外新修 eventBus.js 文件,用来完成兄弟组件通讯
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>