美文网首页
vue中,父子组件传参的方法

vue中,父子组件传参的方法

作者: 小虾米前端 | 来源:发表于2018-05-14 14:07 被阅读0次

1).$emit,这个就不用多说了,到哪儿都查的到。

2).如果不需要通过某事件触发,只把子组件中的参数传递到父组件,供父组件使用可以这样

父组件

<child :catchData="giveMeData"></child>    //引用子组件
data{
  return{
    fatherValue:""
  }
}
methods:{
  giveMeData(value){
    this.fatherValue=value     //在这里把子组件的参数赋值给父组件的参数
}
console.log( this.fatherValue)   //我是子组件的参数

子组件

data(){
  return{
    test:"我是子组件的参数"
  }
}
prop:['catchData']

mounted:{
  this.catchData(this.test)          //你需要传到父组件中的参数
}

3)$refs

  首先你的给子组件做标记。demo :<child ref="one"></child>

  然后在父组件中,通过this.$refs.one就可以访问了这个子组件了 ,包括访问子组件的data里面的数据,调用它的函数

4)$children

他返回的是一个组件集合,如果你能清楚的知道子组件的顺序,你也可以使用下标来操作;

for(let i=0;i<this.$children.length;i++){
       console.log(this.$children[i].msg);输出子组件的msg数据;
 }

相关文章

  • (VUE3) 四、组件传值(父子组件传值 & 祖孙组件传值 &v

    1.父子组件传值 vue2中的父子组件传值:父组件: 子组件: vue3中的父子组件传值: 还是用props接收父...

  • Vue组件通信

    Vue 组件之间的通信,通常我们遇到的都是父子组件之间的通信 一、父子组件传参 子组件定义 Props 属性; 父...

  • vue中,父子组件传参的方法

    1).$emit,这个就不用多说了,到哪儿都查的到。 2).如果不需要通过某事件触发,只把子组件中的参数传递到父组...

  • router-view 父子传参

    导语: 习惯了父子组件传参,今天聊一聊router-view传参。其实本质也是父子组件传参,方法一模一样,之前也提...

  • vue组件传参问题

    在vue项目中会经常遇到组件传参问题,今天就来了解一下父子组件和兄弟组件传参 父组件传值给子组件 *父组件通过 ...

  • vue组件通信

    vue的组件传参的方式父子组件传参1.prop和emit是子传父,子组件监听一个事件,父组件调用并接受子组件传递过...

  • 06.父子组件 (VUE全栈开发学习笔记)

    以下,节选自08.Vue传值方式 3.父子组件传参 使用场景:父子组件间 3.1. 父传子 子组件定义属性: 父组...

  • 1.14、vue 父子组件的传值

    十四、vue 父子组件的传值 6.子组件调用父组件的方法

  • vue第七节

    Vue里组件的通信 通信:传参、控制(A操控B做一个事件)、数据共享 模式:父子组件间、非父子组件 父组件可以将一...

  • vue父子组件传参(异步请求数据)

    vue父子组件传参采用props方式 异步请求数据采用watch监听数据的更改

网友评论

      本文标题:vue中,父子组件传参的方法

      本文链接:https://www.haomeiwen.com/subject/tbnddftx.html