vue组件间传参
Posted cuishuangshuang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue组件间传参相关的知识，希望对你有一定的参考价值。
1、父组件向子组件传参
（1）
父组件传值
<template>
<div>
<Nav ：title="msg" ：info="obj">
</div>
<template>
data(){
return{
msg：标题，
info：{name：‘xxx‘，sex：‘man‘}
}
}
子组件接收
第一种：
props：[ ‘title‘， ‘info‘ ]
第二种：
props：{
title：String，
info:{
name：String，
sex：String
}
}
第三种：
props：{
title：{
type：String，
default：‘主体‘
}
}
2、子组件向父组件传参
子组件传参
<template>
<div>
<button @click="send( )">传参到父组件中</button>
</div>
</template>
msg：‘传给父组件的参数‘
send( ){this.$emit("child"，msg)}
父组件接收参数
<template>
<div>
<Nav @child="receive( )" />
</div>
</template>
receive( data ){console.log(data)} data就是msg参数
3、子组件操作父组件中的方法
父组件
<Nav :fun="add" @child="receive( )" />
title：5
add( ){this.title = 10}
receive( data ){data( )}
子组件
<button @click="send( )">子组件</button>
props:{
fun：Function
}
send( ){this.$emit(‘child‘，this.fun)}
4、父组件获取子组件数据
父组件
<div ref="div">父组件</div>
<Nav ref="nav" />
this.$refs.div.style.color = "red" // 操作标签
this.$refs.nav.msg 获取子组件msg的数据，也可以获取子组件的方法
子组件
<button>子组件</button>
msg：‘子组件中的数据‘
5、兄弟组件传参
父组件
<testA @child="receive( )" />
<testB :title="title" />
title：‘父组件数据‘
receive( res ){this.title = res}
子组件testA
<div @click="send( )">父组件</div>
title：‘testA组件数据‘
send( ){this.$emit("child"，this.title)}
以上是关于vue组件间传参的主要内容，如果未能解决你的问题，请参考以下文章
Vue组件间传值（超全，跨代）父传子，子传父，爷传孙，孙传爷，保姆级讲解
Vue五五组件间传值props,自定义事件传参，ref属性，全局事件总线，root/parent/children方法——provide/inject配置项——$attrs/$listeners