vue单页开发父子组件传值思路详解

<template> 
 <div> 
  <h3>这是父组件</h3> 
  <p style="margin: 20px 0;text-align: center;"> 
   <span>子组件传过来的值是 “{{childValue}}”</span> 
  </p> 
  <example-child v-bind:message="parentMsg" @getChildValue="getValue"></example-child> 
 </div> 
</template> 
<script> 
 import exampleChild from './examplechild.vue'; 
 export default { 
  name: "example.vue", 
  components: { 
   exampleChild 
  }, 
  data(){ 
   return { 
    parentMsg:'hello', 
    childValue:'' 
   } 
  }, 
  mounted(){ 
  }, 
  methods: { 
   getValue:function (val) { 
    this.childValue = val; 
   } 
  } 
 } 
</script> 
<style scoped> 
</style> 

<template> 
 <div> 
  <p style="margin: 20px 0;text-align: center;">我是子组件，父组件穿传过来的值是{{message}}</p> 
  <p style="margin: 20px 0;text-align: center;"> 
   <button @click="send">点击向父组件传值</button> 
  </p> 
 </div> 
</template> 
<script> 
 export default { 
  name: "exampleChild.vue", 
  props:['message'], 
  data(){ 
   return { 
   } 
  }, 
  mounted(){ 
  }, 
  methods: { 
   send:function () { 
    this.$emit('getChildValue','你好父组件！') 
   } 
  } 
 } 
</script> 
<style scoped> 
</style>