zoukankan      html  css  js  c++  java
  • vue父子组件之间的通信

    利用props在子组件接受父组件传过来的值
    1.父组件parentComp.vue

     1 <template>
     2   <childComp :fromParentToChild="fromParentToChild"></childComp>
     3 </template>
     4 <script>
     5 import childComp from './childComp.vue'
     6 export default{
     7   data(){
     8   return{
     9   fromParentToChild:"I am from Parent"
    10   }
    11   },
    12   components:{childComp}
    13   }
    14 </script>


    2.子组件childComp.vue

     1 <template>
     2 <div>{{fromParentToChild}}</div>
     3 </template>
     4 <script>
     5 export default{
     6 props:['fromParentToChild'],
     7 data(){
     8 console.log(this.fromParentToChild)
     9 return{
    10   }
    11   }
    12   }
    13 </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

  • 相关阅读:
    node中fs模块
    node生成excel,动态替换表格内容
    Postgresql存放数组形式的数据
    ubuntu下安装typescript
    随笔6
    excel文件导出相应数据统计内容
    随笔4
    随笔3.2
    随笔2
    随笔1
  • 原文地址:https://www.cnblogs.com/zhangxiaoshu/p/6682535.html
Copyright © 2011-2022 走看看