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 相关文章推荐
深入了解Vue3模板编译原理
Nov 19 Vue.js
用vue设计一个日历表
Dec 03 Vue.js
vue监听滚动事件的方法
Dec 21 Vue.js
vue使用require.context实现动态注册路由
Dec 25 Vue.js
Vue实现图书管理案例
Jan 20 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
vue中 this.$set的使用详解
Nov 17 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
vue elementUI批量上传文件
Apr 26 Vue.js
vue前端工程的搭建
vue中data改变后让视图同步更新的方法
vue3如何优雅的实现移动端登录注册模块
开发一个封装iframe的vue组件
如何让vue长列表快速加载
Vue3 Composition API的使用简介
vue+django实现下载文件的示例
You might like
图解上海144收音机
2021/03/02 无线电
从php核心代码分析require和include的区别
2011/01/02 PHP
php短域名转换为实际域名函数
2011/01/17 PHP
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
PHP爆绝对路径方法收集整理
2012/09/17 PHP
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
JS获取url链接字符串 location.href
2013/12/23 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
python中urlparse模块介绍与使用示例
2017/11/19 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
Python实现随机漫步功能
2018/07/09 Python
python 自动批量打开网页的示例
2019/02/21 Python
深入了解Django中间件及其方法
2019/07/26 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
python 8种必备的gui库
2020/08/27 Python
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
C#面试题
2016/05/06 面试题
信息合作协议书
2014/10/09 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
中班下学期个人总结
2015/02/12 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
护理培训心得体会
2016/01/22 职场文书
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技