vue子傳父多個值
阿新 • • 發佈:2019-04-05
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子傳父多個值