vue封装复选框组件，并调用

最新推荐文章于 2024-09-05 11:22:00 发布

开心你就笑！！哈哈哈

最新推荐文章于 2024-09-05 11:22:00 发布

阅读量453

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_38673922/article/details/108849635

版权

该博客展示了如何在Vue中实现子组件与父组件之间的数据通信。通过使用`v-model`、`props`和`$emit`事件，子组件能够接收父组件的数据并传递回更新。例子中，子组件包含了一个多选框列表，根据用户的选择，向父组件发送`childByValue`事件，传递1或0的值。父组件监听这个事件并做出响应。

摘要由CSDN通过智能技术生成

子组件

 <template>
  <div>
    <span :data-value="value">
      <label
        class="checkbox-inline"
        v-for="item in dataSource"
        :key="item.value"
      >
        <input
          type="checkbox"
          :checked="isChecked(item.value)"
           @change="change($event)"
          :value="item.value"
          v-bind="$attrs"
        />
        {{ item.label }}</label
      > </span
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      inheritAttrs: false,
      vModel:null
    };
  },
  props: {
    value: { default: "" },
    dataSource: { type:Array},
  },
  methods: {
    //获取父级的v-model
    getModel: function () {
        this.vModel = this.value;
    },
    change: function (event) {
      var $obj = event.target;
      // var index = vModel.indexOf($obj.value);
      if ($obj.checked) {
        this.$emit('childByValue', 1)
      } else {
        this.$emit('childByValue', 0)
      }
    },
    isChecked: function (val) {
    },
  },
};
</script>

<style>
</style>

父组件调用

<template>
	<div>
	    <slotshow
	      v-model="Love"
	      @change="Love = $event"
	      :dataSource="dataSource"
	      v-on:childByValue="childByValue"
	    ></slotshow>	
	</div>

</template>	
<script>
import slotshow from "../components/checkBox"
export default {
	 components: {
	   slotshow,
	 },
	data(){
		return{
	   	  Love: "写代码",
	      activeNames: ["1", "2", "3", "4", "5"],
	      dataSource: [{ value: 1, label: "是否有爱好" }],
		}
	},
	methods:{
	      childByValue: function (childValue) { // childValue就是子组件传过来的值
	        console.log(childValue);	//1 或 0
	      },
	}
}
</script>

效果图
在这里插入图片描述