Vue基础组件之间通信

1、vue组件通信的三种传值方式

• 父传子
• 字传父
• 兄弟组件传值

1.1父传子

在父组件Father.vue

  <template>
  	<div>
          <!-- 在父组件中使用该组件 定义一个key 然后是要传递的值 -->
      	<Son msg="hello word" />
      </div>
  </template>
  
  <Script>
      //这里引入组件
      import Son from "../components/Son.vue";
  export default{
      components:{
          //导入的组件需要在components中注册
          Son 
      }
  }
  </Script>

子组件Son.vue

  <template>
  	<div>
          <h1>
          <!-- 在子组件中使用传递的值 -->
          {{msg}}
      	</h1>
      </div>
  </template>
  
  <Script>
  export default{
      props:{
          //父组件穿的的key值再props中定义  后面是传的值的类型
          msg:String
      }
  }
  </Script>

1.2字传父

在子组件Son.vue

    <template>
    	<div>
            <!-- 定义一个点击事件 -->
            <button @click="onClick"></button>
        </div>
    </template>
    <Script>
    	export default {
            data() {
                return {
                    // 设置一个属性
                    data:"哈哈"
                }
            },
            // 点击事件在methods中定义
         methods: {
              onClick(){
           // 使用this.$emit方法传递要传递的数据  
           // 第一个参数是父组件监听的方法名  第二个是要传递的参数
       this.$emit("tranData",this.data)
                }
            },
        }
    </Script>

父组件Father.vue

    <template>
    	<div>
             <!-- 绑定一个事件  监听子组件传递的方法名 -->
            <Son v-on:tranData="monitorData" />
            <p>
                {{data}}
        	</p>
        </div>
    </template>
    
    <Script>
    // 导入子组件
    import Son from "./Son";
        export default{
            components:{
                Son
            },
            data() {
                return {
                    data:""
                }
            },
             // 使用定义的方法  参数就是传递过来的值
          methods: {
              monitorData(value){
               this.data = value
                }
            },
        }
    </Script>  

1.3兄弟组件传值

• 兄弟组件传值有两种方法
• 第一种是在父组件中定义一个值接收 然后再传递给另一个组件
• 第二种是定义一个空的vue文件用来传值
  第一种方法
  子组件一

    <template>
    	<div>
            <!-- 定义一个点击事件 -->
            <button @click="onClick"></button>
        </div>
    </template>
    <Script>
    	export default {
            data() {
                return {
                    // 设置一个属性
                    data:"哈哈"
                }
            },
            // 点击事件在methods中定义
            methods: {
                onClick(){
                    // 使用this.$emit方法传递要传递的数据  
                    // 第一个参数是父组件监听的方法名  第二个是要传递的参数
                    this.$emit("tranData",this.data)
                }
            },
        }
    </Script>

父组件

    <template>
    	<div>
            <Child v-on:tranData="monitorData" />
            <!-- 动态绑定一个key 传递给另一个子组件 -->
            <Child2 :str="data" />
        </div>
    </template>
    
    <Script>
    // 导入子组件
    import Child from "./Child"
    import Child2 from "./Child2"
        export default{
            components:{
                Child,
                Child2
            },
            data() {
                return {
                    data:""
                }
            },
             // 使用定义的方法  参数就是传递过来的值
            methods: {
                monitorData(value){
                    //把子组件一传递过来的值赋值给在data中自定义的一个属性
                    this.data = value
                }
            },
        }
    </Script>

子组件二

    <template>
        <div>
            <h2>
                <!-- 使用传递过来的值 -->
                {{str}}
            </h2>
        </div>
    </template>
    
    <script>
        export default {
            props:{
                str:String
            }
        }
    </script>

第二种方法
定义一个空的js文件eventBus.js

    import Vue from 'vue'
    export default new Vue()

子组件一

    <template>
        <div>
            <!-- 定义一个点击事件 -->
            <button @click="onClick"></button>
        </div>
    </template>
    
    <script>
    //导入eventBus.js文件
    import eventBus from "./eventBus.js"
        export default {
            data() {
                return {
                    data:"哈哈"
                }
            },
            // 点击事件在methods中定义
            methods: {
                onClick(){
                    //使用该文件提交一个方法   参数和子传父一样
                    eventBus.$emit("add",this.data)
                }
            },
        }
    </script>

子组件二

    <template>
        <div>
            
        </div>
    </template>
    
    <script>
    	import eventBus from "./eventBus.js"
        export default {
            props:{
                str:String
            },
            //使用created生命周期函数
            created() {
                //msg就是传递的参数
                eventBus.$on("add",(msg)=>{
                    window.console.log(msg)
                })
            },
        }
    </script>