问答

vue子组件传值不到父组件中去

作者:admin 2021-09-08 我要评论

本来是用饿了么框架的,但框架没有这个组件,于是自己写了个,但发现了传值不了的问题(可能是我写的不好吧 ~.~ ) 父组件: template div style="margin:50px" ...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

image.png

本来是用饿了么框架的,但框架没有这个组件,于是自己写了个,但发现了传值不了的问题(可能是我写的不好吧 ~.~ )

父组件:

<template>
    <div style="margin:50px">
        {{checked}}
        <cmsChecked :data="formData" v-model="checked"></cmsChecked>
    </div>
</template>
---------------------------
return {
    checked:[],
    formData:[
        {
            id:1,
            label:"蜘蛛"
        },
        {
            id:2,
            label:"蝙蝠"
        },
        {
            id:3,
            label:"红玫瑰"
        }
    ]
}

子组件:

<template>
    <div>
        <span
            v-for="(item,index) in data"
            :key="index"
            class="cms-checked"
            @click="selectData(item.id)"
            :class="{active:selectId.indexOf(item.id)>=0?true:false}">
            {{item.label}}
            <img src="./icon/checked.png" class="icon" v-if="selectId.indexOf(item.id)>=0?true:false">
        </span>
    </div>
</template>
--------------------------
props:["data","value"],
data () {
    return {
        n:null,
        selectId:[]
    }
},
watch:{
    selectId(val){
        console.log(val);
        this.$emit("value",val);
    }
},
methods:{
    selectData(id){
        if(this.selectId.indexOf(id) >= 0){
            let n = this.selectId.indexOf(id);
            this.selectId.splice(n,1);
        }
        else{
            this.selectId.push(id);
        }
    }
},

无论怎么选中,父组件的checked始终为空

###

因为你父组件中没有接收$emit传过来的值。

  <cmsChecked @value="value" :data="formData" v-model="checked"></cmsChecked>
  methods:{
  value(val){
     console.log(val)
  }
  }

然后将val的值赋给checked:[],即可。

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue子组件传值不到父组件中去

    vue子组件传值不到父组件中去

  • websocket客户端发送的数据会按序到底

    websocket客户端发送的数据会按序到底

  • vue组件css改动,为什么js的contenthas

    vue组件css改动,为什么js的contenthas

  • 如何找到对象的最深层级?

    如何找到对象的最深层级?

腾讯云代理商
海外云服务器