前端开发您现在的位置是:首页 > 博客日志 > 前端开发

vue router-view 组件间传值

<a href='mailto:'>微wx笑</a>的头像微wx笑2021-06-10 14:13:10前端开发人已围观关键字: vue  router-view  组件间传值  props  

在vue项目日常开发中,难免要把功能性组件抽离出来,这样结构就会出现父子组件,兄弟组件等,但是这样就会涉及到不同组件之间需要互相使用其中的变量值的问题。

在vue项目日常开发中,难免要把功能性组件抽离出来,这样结构就会出现父子组件,兄弟组件等,但是这样就会涉及到不同组件之间需要互相使用其中的变量值的问题。ijc编程技术_踩坑日志_进阶指南_无知人生


ijc编程技术_踩坑日志_进阶指南_无知人生

情况一:router-view 子组件发生变化导致父组件发生改变ijc编程技术_踩坑日志_进阶指南_无知人生

父组件中:ijc编程技术_踩坑日志_进阶指南_无知人生

<router-view @getMessage="showMsg"></router-view>
showMsg (val) {   // methods方法  val即为子组件传过来的值
  console.log(val)
}

子组件中:ijc编程技术_踩坑日志_进阶指南_无知人生

this.$emit('getMessage', “传给父组件的值”);

情况二:router-view 父组件发生变化导致子组件发生改变ijc编程技术_踩坑日志_进阶指南_无知人生


ijc编程技术_踩坑日志_进阶指南_无知人生

父组件中:ijc编程技术_踩坑日志_进阶指南_无知人生

<router-view  :searchVal="searchVal" :searchVal2="searchVal2" :searchVal3="postForm.searchVal3"></router-view>
searchVal: '',  // data里面申明
searchVal2: '',
postForm: { searchVal3: '' }
this.searchVal = ‘需要传给子组件的值’;    // 在需要传值的方法中处理

子组件中:ijc编程技术_踩坑日志_进阶指南_无知人生

props: ['searchVal', 'searchVal2', 'searchVal3'],

watch: {
      searchVal: function (val) {       
       console.log(val);   // 接收父组件的值
      },
      searchVal2: function (val) {       
       console.log(val);   // 接收父组件的值
      },
      searchVal3: function (val) {       
       console.log(val);   // 接收父组件的值
      }
    },


ijc编程技术_踩坑日志_进阶指南_无知人生

本文为转载文章,版权归原作者所有,不代表本站立场和观点。

很赞哦! () 有话说 ()