大家早上好鸭,本篇文章主要来探讨一下Vue子父组件通信的问题

首先我们得在搭建好开发环境的前提下,开始操作(可看上篇文章哦)

接下来我们就直接进入demo;
APP.vue 是这个样子滴
Vue实现子父组件之间通信

父组件向子组件传值

①创建子组件,在src/components/文件夹下新建一个child.vue;
②child.vue中创建props,之后创建一个msg的属性

child.vue部分
Vue实现子父组件之间通信
③App.vue中注册child组件,在template加入child标签,标签中添加msg属性并给其赋值

Vue实现子父组件之间通信
接下来就可以保存 预览啦;

子组件向父组件传值

emitchild.vue使emit ①可以在child.vue创建一个按钮,给其绑定一个点击事件,并在改点击事件的函数中使用emit来触发自定义事件,传递一个参数

Vue实现子父组件之间通信
②在parent.vue中的子标签上监听自定义事件并添加一个响应该事件的处理方法
Vue实现子父组件之间通信
③保存文件 就可以预览啦;

今天就先分享这么多啦 白白la

相关文章:

  • 2021-10-24
  • 2021-05-27
  • 2021-06-26
  • 2021-03-31
  • 2021-11-15
  • 2021-09-14
  • 2021-10-14
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-10-30
  • 2018-09-28
  • 2021-06-25
  • 2022-12-23
  • 2021-04-16
相关资源
相似解决方案