VUE中子组件和父组件通信之router-view组件

 时间:2024-10-11 21:28:18

1、vue中父组件通过props传递参数到子组件中,子组件接收父组件的数据后可以直接使用。这里就不再给普通的组件的例子了,我们直接上vue-router,首先在入口函数main.js中定义路由:

VUE中子组件和父组件通信之router-view组件

2、然后在父组件App.vue中使用vue-router,见图片中的router-link和router-view,选中的router-link会加载到router-view中,这里我们使用v-bind指令将Appp.vue中的msg传递到子组件

VUE中子组件和父组件通信之router-view组件VUE中子组件和父组件通信之router-view组件VUE中子组件和父组件通信之router-view组件

3、npm run dev,启动开发环境,见下图,父组件的msg,顺利被子组件接收且使用。

VUE中子组件和父组件通信之router-view组件VUE中子组件和父组件通信之router-view组件

4、接下来在子组件中加入发送$emit事件的方法:子组件mounted后执行init方法,init发送test事件和数据first或者second;

VUE中子组件和父组件通信之router-view组件VUE中子组件和父组件通信之router-view组件

5、父组件成功响应test事件,执行testp函数,修改msg值,msg通过props传递到子组件,效果如下

VUE中子组件和父组件通信之router-view组件VUE中子组件和父组件通信之router-view组件

6、是不是不再困惑了?实际开发中,可能页面有嵌套router-view,出现多层的情况,每组父子组件采用如上方式处理即可。

  • 恶魔第2.5章攻略:[3]
  • 肉桂糖粒腰果 喝酒时的小点心
  • 老外如何在义乌购买/转让/过户二手车
  • 幼儿怎样玩电动玩具车
  • layui调用子页面方法
  • 热门搜索
    灭顶之灾的意思 莘莘学子的意思 hcgb是什么意思 望哨的意思 漫游的意思 诠释的意思 adore什么意思中文 欣的意思 爱的意思 桥头跳车是什么意思