zoukankan      html  css  js  c++  java
  • vue子传父多个值

    子组件: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>
  • 相关阅读:
    Python使用小功能
    2月5日学习记录
    关于js的词法分析
    JavaScript
    blog界面美化
    css属性
    css三大特性
    css之选择器4
    css之选择器3-系列选择器
    css之选择器2
  • 原文地址:https://www.cnblogs.com/luguankun/p/10659315.html
Copyright © 2011-2022 走看看