首页 > 其他分享 >三、说说Vue组件间的传值? 并说说如何跨级传值??

三、说说Vue组件间的传值? 并说说如何跨级传值??

时间:2022-12-30 17:56:41浏览次数:39  
标签:Vue msg keyname 组件 接收数据 跨级 传值

1、父组件传给子组件: 子组件通过props属性接收数据

2、子组件传给父组件:$emit() 方法进行传递参数

3、非父子组件之间的传值,兄弟组件间传值 eventBus(中央时间总线),可以看成一个中转站,用它传递事件和接收事件。发送数据用$emit()方法, 接收数据用$on接收(监听)。

4、provide 属性 和  inject属性 进行跨级传值,

provide () {
    return {
        keyname: { msg: this.msg } //必须写成对象的形式才是响应式
        // keyname: this.msg // 基本类型的数据(无法实现响应式)
    }
},
data () {
    return {
        msg: 'msg的值'
    }
},
// 后代组件
inject: ['keyname'], // 就像props 接收父组件的数据一样n

created () {
    // console.log(this.keyname);
    console.log(this.keyname.msg);
}

 

  

标签:Vue,msg,keyname,组件,接收数据,跨级,传值
From: https://www.cnblogs.com/chen-cheng/p/17015438.html

相关文章

  • vue3.0toRaw()、markRaw()、customRef()
    1.toRaw和markRaw的使用意义(给reactive对象进行的添加属性都会自动给该属性添加响应式,当需要给reactive添加没有响应式的属性则使用) 2. toRaw和markRaw的使用示例(对其......
  • vue中echarts图表自适应
    <template><divid="app"></div></template><script>exportdefault{data(){return{myCharts:null}},......
  • vue 中图片上传
    <template><div><h1>展示的内容:{{meg}}</h1><inputtype="text"v-model="inputValue"@keyup.enter="fn"/><hr/><imgwidth="200":src="img......
  • 自用对比vue2的vue3+vite 测试笔记
    目录基础对比研究子组件父组件scriptsetup极简父传子子传父父组件子组件基础对比研究子组件<scriptsetup>import{reactive,ref,computed,watch,watchEffect,o......
  • vue保留小数点后两位
    //保留小数点后两位,四舍五入numFilter(value){letrealVal=parseFloat(value).toFixed(2);returnrealVal;},//保留小数点后两位,不四舍五入numFilter(va......
  • vue3的shallowRef()和shallowReactive()
    1.shallowReactive():使用shallowReactive转化的对象只有对象的第一层级有响应式。   2.shallowRef():使用shallowRef转化的基本数据类型和使用ref没有差别,使用shallo......
  • 【新闻推荐系统】(task4)Vue基础与实战(更新ing)
    学习总结文章目录​​学习总结​​​​二、Vue简介​​​​2.1安装​​​​2.1.1通过<script>标签引入​​​​2.1.2通过CDN安装​​​​2.1.3通过NPM安装​​​​2.2......
  • vue 批量大文件上传下载
    ​ 我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用。这次项目的需求:支持大文件的上传和续传,要求续传支持......
  • vue elementui 表格内容不能自适应填充
    问题现象:   解决方式:<el-table-columnlabel="合同标题"align="center"prop="conTitle"/><el-table-columnlabel="合同内容"align="center"prop="conCont......
  • vue elementui 点击取消按钮报错 Uncaught (in promise) cancel Promise.then(异步)
          解决方法  .catch(()=>{})//添加错误捕获 ......