vue父子组件之间传值

父 -> 子

步骤:
1.在父组件中子组件HelloWorld 代码上面绑定一个 子组件使用的属性:title 用于获取父组件的值
2. 在子组件中 export default{}中使用props来获取

props: {
    title: {
      type: String,
      required: true,
      default: "默认值"
    },
  }

父组件 <HelloWorld :title="msg"/>

<!-- 父组件向子组件中船体 msg 这个变量 -->
<template>
  <div id="app">
    <HelloWorld :title="msg"/>
  </div>
</template>
<script>
import HelloWorld from "./components/HelloWorld"
export default {
  name: "App",
  data() {
    return {
      msg: "父组件 中的 msg",
    }
  },
  components: {
    HelloWorld
  }
};
</script>

子组件

props: { title: { type: String, required: true, default: "默认值" } }

<template>
  <div class="hello">
    <h2>父组件 => {{ title }}</h2>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    title: {
      type: String,
      required: true,
      default: "默认值"
    },
  }
}
</script>

子-> 父

步骤:

1. 子组件使用 this.$emit("名称", 传递值)来给父组件传值
2. 父组件在子组件代码上面使用自定义的函数(revice) <HelloWorld @helloWorldEmit="revice" />根据上面$emit中的第一个参数 "名称"来获取值

子组件

<template>
  <div class="hello">
    <h2>我是 子组件 helloworld 组件</h2>
    <button @click="toFu">传递子组件的值</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      name: "lvhan"
    }
  },
  methods: {
    toFu(){
      this.$emit("helloWorldEmit", this.name)
    }
  }
};
</script>

父组件

<template>
  <div id="app">
    <HelloWorld :title="msg" @helloWorldEmit="revice" />
    <Bro />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld"
export default {
  name: "App",
  data() {
    return {
      msg: "父组件 中的 msg",
    };
  },
  components: {
    HelloWorld,
  },
  methods: {
    revice(name) {
      alert(name);
    },
  },
};
</script>

兄弟组件

描述: Bro 组件给 HelloWorld 组件传值

步骤:

1. 在App.vue中创建$bus
2. 在 Bro组件中使用 this.$bus.$emit("名称", 值)向HelloWorld 组件中发送值
3. 在HelloWorld的生命周期函数中 使用 this.$bus.$on("名称", 执行的函数) 获取值

注意: this.$bus.$on("名称", 执行的函数) 执行的函数 如果使用的的 function(){} 会导致 this指向不正确, 顾可以使用 匿名函数()=>{}

App.vue

<template>
  <div id="app">
    <HelloWorld/>
    <Bro />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld"
import Bro from "./components/Bro"
import Vue from 'vue'

// 1. 使用vue 绑定$bus
Vue.prototype.$bus = new Vue()

export default {
  name: "App",
  components: {
    HelloWorld,
    Bro,
  }
};
</script>

Bro组件

<template>
  <div>
    <h2>我是 Bro 组件 ------{{ broParam }}</h2>
    <button @click="send">send 发送消息</button>
  </div>
</template>

<script>
export default {
    data(){
        return {
            broParam: "Bro 参数"
        }
    },
    methods: {
        send(){
            // 2. 通过$bus来传递 兄弟组件之间的值
            this.$bus.$emit("sendBro", this.broParam)
        }
    }
}
</script>

<style>

</style>

HelloWorld组件

<template>
  <div class="hello">
    <h2>我是 子组件 helloworld 组件</h2>
    <h2>父组件 => {{ title }}</h2>
    <button @click="toFu">传递子组件的值</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  // 3. 在生命周期函数中使用 $on 来获取
  created(){
    this.$bus.$on("sendBro", (p)=>console.log(p))
  },
  data() {
    return {
      name: "lvhan"
    }
  }
};
</script>