vue的组件之间传值方法

父组件

<template>
  <div>
    这是父组件
    <children v-bind:parentToChild="toChild" v-on:showChildMsg="formChild"></children>
    <!-- 使用vind:参数名 绑定传值，使用on:参数名 来监听接收子组件传来的信息-->
    {{showChildMsg}}
  </div>
</template>
 
<script>
import children from "./children.vue";
export default {
  name: "HelloWorld",
  data() {
    return {
        toChild:"父组件传值给子组件",
        showChildMsg:''
    };
  },
  methods: {
      formChild:function(data){
        //监听子组件子组件传值
        this.showChildMsg = data;
      }
  },
  components: { children }
};
</script>
 
<style scoped>
 
</style>

子组件

<style scoped>
/* css */
</style>
<template>
  <div class id>
    {{parentToChild}}
    <br/>
    <button @click="goParent">点击向父组件传值</button>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    goParent: function() {
      this.$emit("showChildMsg", "这是子组件传值给父组件");
      //子组件 通过$emit函数向父组件传值，这个showChildMsg参数名对应的就是父组件里面的v-on：showChildMsg参数名
    }
  },
  activated() {},
  props: ["parentToChild"]
};
</script>