vue中数据传送-子组件和父组件

子传父

子组件
<template>
    <div>
        v2
        <button @click="testHandler">点击</button>
    </div>
</template>

<script>
    export default {
        name: "V1",
        data(){
            return{
                msg:"v2 data"
            }
        },
        methods:{
            testHandler(){
                this.$emit("onV2msg",this.msg);
            }
        }
    }
</script>
<style scoped>
</style>

父组件

<template>
  <div id="app">
    <v1 :dd="dd"/>
    <v2 @onV2msg="v2SMGhandler"/>
  </div>
</template>

<script>
import V1 from "./components/V1";
import V2 from "./components/V2";

export default {
  name: 'app',
  data(){
    return{
      dd:""
    }
  },
  components: {
    HelloWorld,
    V1,
    V2
  },
  methods:{
    v2SMGhandler(data){
      this.dd = data;
    }
  }
}
</script>
<style>
</style>

父传子

<template>
    <div>
        v1-{{dd}}
    </div>
</template>

<script>
    export default {
        name: "V1",
        props:{
            dd:{
                type:String,
                default:""
            }
        }
    }
</script>

<style scoped>

</style>