1. 程式人生 > >vue子傳父多個值

vue子傳父多個值

ret nts col back bsp argument scope temp default

子組件:this.$emit("methdosName",data1,data2,data3)

父組件: <child @methodsName="xxx(arguments)"></child>

例子:

子組件:

<template>
<div>
    <button @click="trans()">點擊傳值</button>
</div>
</template>
<script>
export default {
  name: "Chile",
  data () {
    
return { data:"123", data2:[1,2,3], data3:{ test:"123" } }; }, methods:{ trans(){ this.$emit("transdata",this.data,this.data2,this.data3); } } } </script> <style lang="css" scoped> </style>

父組件:

<template>
<div>
    <child @transdata="getValue(arguments)"></child>
    <span v-for="(item,i) in parentData">{{item}}</span>
</div>
</template>
<script>
import Child from ./Child.vue
export default {
  name: "Parent",
  components:{
Child
  },
  data () {
    
return { parentData:"父組件" }; }, methods:{ getValue(data){ this.parentData = data; } } } </script> <style lang="css" scoped> </style>

vue子傳父多個值