子组件: 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>
来源: http://www.bubuko.com/infodetail-3012325.html