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

發(fā)布時間：2020-09-29 18:50:49 來源：腳本之家閱讀：147 作者：取個帥氣的名字真好欄目：web開發(fā)

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

1、安裝

在桌面新建一個文件夾

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

vue init webpack . 之后的選擇解釋

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

2、刪除

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

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

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

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

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

總結(jié)

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

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽