vue2.0 父組件給子組件傳遞數據的方法

來源：懂視網責編：小采時間：2020-11-27 22:21:32

vue2.0 父組件給子組件傳遞數據的方法

vue2.0 父組件給子組件傳遞數據的方法:在父組件 App.vue 中引用子組件 A.vue，把 name 的值傳給 A 組件。 1、安裝在桌面新建一個文件夾 $ cd 到文件中 $ npm install -g vue-cli $ vue init webpack . $ npm install $ npm run dev vue init webpack

推薦度：

點擊下載本文 文檔為doc格式

導讀vue2.0 父組件給子組件傳遞數據的方法:在父組件 App.vue 中引用子組件 A.vue，把 name 的值傳給 A 組件。 1、安裝在桌面新建一個文件夾 $ cd 到文件中 $ npm install -g vue-cli $ vue init webpack . $ npm install $ npm run dev vue init webpack

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

1、安裝

在桌面新建一個文件夾

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

vue init webpack . 之后的選擇解釋

2、刪除

1、刪除App中的一些內容如下

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:"我就是數據啊"
 }
 }
}
</script>

4、新建

在components新建A.vue并寫入內容如下：

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

5、最后

在命令行輸入

$ npm run dev

總結

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

vue2.0 父組件給子組件傳遞數據的方法

推薦度：

點擊下載本文 文檔為doc格式

標簽：方法數據 VUE

熱門焦點

vue2.0 父組件給子組件傳遞數據的方法

vue2.0 父組件給子組件傳遞數據的方法

vue2.0 父組件給子組件傳遞數據的方法

最新推薦

猜你喜歡

熱門推薦