vue3中的组件间通信


Posted in Vue.js onMarch 31, 2021

父给子传值 props

我们通过在父组件引用子组件的时候,可以通过自定义属性进行值的传递,在子组件通过 props 进行接受。

//parent.vue
<template>
  <div class="search">
    <span>这是父组件的值:{{test}}</span>
    <Child :toChild="test"/> // 通过自定义属性 toChild
  </div>
</template>
<script>
import Child from './child.vue'
export default {
  name: "parent",
  setup(){
    const test = ref("传给子组件")
    return {
      test
    }
  },
  components:{
    Child
  },
}
</script>
//child.vue
<template>
  <div class="child">
    子组件接收的值:{{toChild}}
  </div>
</template>
<script>
export default {
  name:"child",
  props:["toChild"], //通过props接收自定义属性 toChild
}
</script>

$attrs给子组件传值

我们的 $attrs 只会包括未被 props 继承的属性。

//parent.vue
<template>
  <div class="search">
    <span>这是父组件的值:{{test}}</span>
    <Child :toChild="test" :toTest="`测试数据`"/>
  </div>
</template>
<script>
import {ref} from 'vue'
import Child from './child.vue'
export default {
  name: "parent",
  setup(){
    const test = ref("传给子组件")
    return {
      test
    }
  },
  components:{
    Child
  },  
}
</script>
//child.vue
<script>
export default {
  name:"child",
  props:["toChild"],
  created:function(){
    console.log(this.$attrs,"test")
  },
}
</script>

我们控制台的打印为:
vue3中的组件间通信

$parent

通过 $parent 获取父级的时候,可以获取父级的全部属性。

//parent.vue
<template>
  <div class="search">
    <span>这是父组件的值:{{test}}</span>
    <Child :toChild="test" :toTest="`测试数据`"/>
  </div>
</template>
<script>
import {ref} from 'vue'
import Child from './child.vue'
export default {
  name: "parent",
  setup(){
    const test = ref("传给子组件")
    const bar = ref("这你都可以拿得到")
    return {
      test,
      bar
    }
  },
  components:{
    Child
  },  
}
</script>
//child.vue
<template>
  <div class="child">
    子组件接收的值:{{toChild}}
  </div>
</template>
<script>
export default {
  name:"child",
  props:["toChild"],
  created:function(){
    console.log("bar:",this.$parent.bar)
    console.log("test:",this.$parent.test)
  },
}
</script>

我们控制台的打印为:
vue3中的组件间通信
可以看到我们并没有对 test 进行抛出,但是我们还是可以获取到,同时需要注意的是,我们获取的方式是使用的父级的变量名。

provide / inject

//parent.vue
<script>
import {ref,provide} from 'vue'
export default {
  name: "parent",
  setup(){
    const test = ref("传给子组件")
    provide("testpro",test)
  },
  components:{
    Child
  },  
}
</script>
//child.vue
<script>
import {inject} from 'vue'
export default {
  name:"child",
  created:function(){
    console.log("test:",inject("testpro"));
  },
}
</script>

在我们的控制台打印如下:
vue3中的组件间通信
通过 provide / inject 获取只需要通过对应的API 提供,注入就可以获取,不需要抛出。

子组件向父组件传递 emit

//parent.vue
<template>
  <div class="search">
    <span>这是父组件的值</span>
    <Child @testEmit="updateCity"/>
  </div>
</template>
<script>
import Child from './child.vue'
export default {
  name: "parent"
  methods:{
    updateCity(data){
        console.log("子组件传递的:",data);
    }
  },
  components:{
    Child
  },  
}
</script>
//child.vue
<template>
  <div class="child" @click="toChild">
  </div>
</template>
<script>
export default {
  name:"child",
  methods:{
      toChild(){
        this.$emit("testEmit","传给父组件")
      }
  },
}
</script>

vue3中的组件间通信

但是这种方法在 Vue3.x 中不推荐使用。

Vue.js 相关文章推荐
vue+iview实现分页及查询功能
Nov 17 Vue.js
在Vue中使用mockjs代码实例
Nov 25 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
vue实现拖拽进度条
Mar 01 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
如何使用vue3打造一个物料库
May 08 Vue.js
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
vue前端工程的搭建
vue中data改变后让视图同步更新的方法
vue3如何优雅的实现移动端登录注册模块
开发一个封装iframe的vue组件
如何让vue长列表快速加载
Vue3 Composition API的使用简介
vue+django实现下载文件的示例
You might like
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
php fread读取文件注意事项
2016/09/24 PHP
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
JavaScript原型对象原理与应用分析
2018/12/27 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
2020/07/31 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
Python实现网站文件的全备份和差异备份
2014/11/30 Python
Python 文件管理实例详解
2015/11/10 Python
windows下python连接oracle数据库
2017/06/07 Python
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
python创建n行m列数组示例
2019/12/02 Python
python序列类型种类详解
2020/02/26 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
北京振戎融通Java面试题
2015/09/03 面试题
小学音乐教学反思
2014/02/05 职场文书
小学生操行评语
2014/04/22 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
在pyCharm中下载第三方库的方法
2021/04/18 Python