快捷導(dǎo)航

vue2.0 父組件給子組件傳遞數(shù)據(jù)的方法

更新時(shí)間：2018年01月15日 09:58:17 作者：取個(gè)帥氣的名字真好

在父組件 App.vue 中引用子組件 A.vue，把 name 的值傳給 A 組件。這篇文章主要介紹了vue2.0 父組件給子組件傳遞數(shù)據(jù)的方法,需要的朋友可以參考下

在父組件 App.vue 中引用子組件 A.vue，把 name 的值傳給 A 組件。

1、安裝

在桌面新建一個(gè)文件夾

$ cd 到文件中
$ npm install -g vue-cli
$ vue init webpack . 
$ npm install
$ npm run dev

vue init webpack . 之后的選擇解釋

2、刪除

1、刪除App中的一些內(nèi)容如下

2、刪除components文件中的HelloWorld.vue

3、修改

修改App.vue

如下：

<template>
 <div id="app">
 // message 定義在子組件的 props 中
 <A v-bind:message="name"/>
 </div>
</template>
<script>
import A from './components/A'
export default {
 name: 'App',
 components: {
  A
 },
 data(){
  return{
   name:"我就是數(shù)據(jù)啊"
  }
 }
}
</script>

4、新建

在components新建A.vue并寫入內(nèi)容如下：

<template>
 <div>{{message}}</div>
</template>
<script>
 export default {
  props: ['message'] //接受message傳過來的數(shù)據(jù)
 }
</script>

5、最后

在命令行輸入

$ npm run dev

總結(jié)

以上所述是小編給大家介紹的vue2.0 父組件給子組件傳遞數(shù)據(jù)的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

vue v-for 點(diǎn)擊當(dāng)前行,獲取當(dāng)前行數(shù)據(jù)及event當(dāng)前事件對象的操作
這篇文章主要介紹了vue v-for 點(diǎn)擊當(dāng)前行,獲取當(dāng)前行數(shù)據(jù)及event當(dāng)前事件對象的操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
淺析Vue下的components模板使用及應(yīng)用
這篇文章主要介紹了Vue下的components模板的使用及應(yīng)用，本文通過代碼介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-11-11
vue自定義實(shí)例化modal彈窗功能的實(shí)現(xiàn)
這篇文章主要介紹了vue自定義實(shí)例化modal彈窗,Vue.extend 屬于Vue的全局 api，在實(shí)際業(yè)務(wù)開發(fā)中我們很少使用，因?yàn)橄啾瘸Ｓ玫?nbsp;Vue.component寫法使用 extend 步驟要更加繁瑣一些，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下
2022-09-09
在vant中使用時(shí)間選擇器和popup彈出層的操作
這篇文章主要介紹了在vant中使用時(shí)間選擇器和popup彈出層的操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue 使用原生組件上傳圖片的實(shí)例
這篇文章主要介紹了vue 使用原生組件上傳圖片的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
vue.js的狀態(tài)管理vuex中store的使用詳解
今天小編就為大家分享一篇vue.js的狀態(tài)管理vuex中store的使用詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
使用sessionStorage解決vuex在頁面刷新后數(shù)據(jù)被清除的問題
localStorage沒有時(shí)間期限，除非將它移除，sessionStorage即會(huì)話，當(dāng)瀏覽器關(guān)閉時(shí)會(huì)話結(jié)束，有時(shí)間期限，具有自行百度。本文使用的是sessionStorage解決vuex在頁面刷新后數(shù)據(jù)被清除的問題,需要的朋友可以參考下
2018-04-04
Vue使用Element-UI實(shí)現(xiàn)分頁效果全過程
element-ui官網(wǎng)上有分頁實(shí)現(xiàn)的功能,簡單方便又好用,也有很多分頁的樣式,你可以根據(jù)需要去選擇自己想要的樣式,下面這篇文章主要給大家介紹了關(guān)于Vue使用Element-UI實(shí)現(xiàn)分頁效果的相關(guān)資料,需要的朋友可以參考下
2023-04-04
解決vuex改變了state的值,但是頁面沒有更新的問題
這篇文章主要介紹了解決vuex改變了state的值,但是頁面沒有更新的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
Vue計(jì)算屬性實(shí)現(xiàn)成績單
這篇文章主要為大家詳細(xì)介紹了Vue計(jì)算屬性實(shí)現(xiàn)成績單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08