前言：vue就是各组件间的交互，因此各种传递就是vue的关键，但是这个又是经常容易忘记的，因此记录一下vue的传值的实现

父传子的实现

<!-- 父主键的实现-->
<template>
  <div id="app">
   <!-- 通过myname传递父组件的参数给到子组件 -->
    <Leave :myname="myname">hello</Leave>
    {{fadata}}
  </div>
</template>

<script>
import Leave from "./components/Leave.vue";
export default {
  name: 'App',
  data(){
    return {
      myname:'我是父传子参数',
    }
  },
  components: {
    Leave
  },
}
</script>

<!-- 子组件的实现 -->
<template>
    <div>
        <h4>{{myname}}</h4>
    </div>
</template>

<script>
    export default {
        name: "Leave",
        props:{
            myname:{
                type:String,
                default:'我是默认值'
            },
        },
    }
</script>

子传父的实现通过$emit的方法实现

<!-- 子组件的实现 -->
<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <!--    通过$emit的方法调用子传父的方法-->
    <Leave @newName="fadata=$event"></Leave>
    {{fadata}}
  </div>
</template>

<script>
import Leave from "./components/Leave.vue";

export default {
  name: 'App',
  data(){
    return {
      myname:'我是父传子参数',
      fadata:''
    }
  },
  components: {
    HelloWorld,
    Leave
  },
}
</script>
<!-- 子组件的实现 -->
<template>
    <div>
        <button @click="doclik">点击我传递参数</button>
    </div>
</template>

<script>
    export default {
        name: "Leave",
        methods:{
            //通过$emit实现子传父
            doclik(){
                this.$emit('newName','my name is doclick')
            }
        }
    }
</script>