vue组件间传参

标签：标题   col   name   template   microsoft   div   就是   参数   string   

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组件间传参

标签：标题   col   name   template   microsoft   div   就是   参数   string   

原文地址：https://www.cnblogs.com/cuishuangshuang/p/13070220.html