vue單頁開發父子組件傳值思路詳解

2019-11-19 13:49:01

字體：大中小

來源：轉載

供稿：網友

vue單頁開發時經常需要父子組件之間傳值，自己用過但是不是很熟練，這里我抽空整理了一下思路，寫寫自己的總結。

GitHub地址：https://github.com/leileibrother/wechat-vue

文件目錄如下圖，example.vue是父組件，exampleChild.vue是子組件。

父組件引入子組件，父組件html的代碼如下：

<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>

1，父組件向子組件傳值。

在父組件中使用v-bind來綁定數據傳給子組件，如我寫的v-bind:message="parentMsg"，把message字段傳給子組件，