Vue实现子父组件之间通信

大家早上好鸭,本篇文章主要来探讨一下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