vue實(shí)現(xiàn)父子組件間傳值的代碼怎么寫

今天小編給大家分享一下vue實(shí)現(xiàn)父子組件間傳值的代碼怎么寫的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

先定義一個子組件，在組件中注冊props

<template>

  <div>

    <div>{{message}}(子組件)</div>

  </div>

</template>

<script>

export default {

  props: {

    message: String //定義傳值的類型<br>  }

}

</script>

<style>

</style>

在父組件中，引入子組件，并傳入子組件內(nèi)需要的值

<template>

  <div>

    <div>父組件</div>

    <child :message="parentMsg"></child>  

  </div>

</template>

 

<script>

 

import child from './child' //引入child組件

export default {

  data() {

      return {

        parentMsg: 'a message from parent' //在data中定義需要傳入的值

      }

    },

    components: {

      child

    }

}

</script>

<style>

</style>

這種方式只能由父向子傳遞，子組件不能更新父組件內(nèi)的data

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測試性更強(qiáng)的代碼庫，Vue允許可以將一個網(wǎng)頁分割成可復(fù)用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

以上就是“vue實(shí)現(xiàn)父子組件間傳值的代碼怎么寫”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。