vue父子組件之間的通信

利用props在子組件接受父組件傳過來的值
1.父組件parentComp.vue

<template>
　　<childComp :fromParentToChild="fromParentToChild"></childComp>
</template>
<script>
import childComp from './childComp.vue'
export default{
　　data(){
　　return{
　　fromParentToChild:"I am from Parent"
　　}
  },
　　components:{childComp}
  }
</script>

 

2.子組件childComp.vue

<template>
<div>{{fromParentToChild}}</div>
</template>
<script>
export default{
props:['fromParentToChild'],
data(){
console.log(this.fromParentToChild)
return{
  }
  }
  }
</script>

 

3.路由文件index.js

export default new Router({
routes: [
{
path:'/parentToChild',
name:'parentToChild',
component:require('../components/demo/parentComp.vue')
}})

 

在瀏覽器地址欄輸入：http://localhost:[port]/#/parentToChild
可以在頁面窗口看到顯示：I am from Parent