owl's blog

Vue组件的封装

2019.06.05

Vue封装组件

  1. 父 页面上的代码 :data这个东西随便取的名称,后面跟的data为你要传进子组件的数据。
<template>
  <div class="demo">
    <MySwitch :data="data" @callback="delect"/> 
  </div>
</template>
//引入组件
import MySwitch from "@/components/Switch";
//组件注册
components: { MySwitch }, 
 
return {
      data: [
        {
          title: "第一行"
        },
        {
          title: "第二行"
        },
        {
          title: "第三行"
        }
      ],
    };

    delect(index) {
      this.data.splice(index, 1);
    }

2.子

<div class="Switch">
	<ul>
		<li v-for="(item,index) in data" :key="index">
			{{item.title}}
			<button @click="delectData(index)">删除</button>
		</li>
	</ul>
</div>

在父组件传过来了值当然需要在子组件接收啊。就用到了props 这里面的data就是传过来的自定义的。然后就可以在子组件中将数据循环出来。

	props: {
		data: {
			type: Array
			}
		}

循环出来的数据当然也是可以删除的。向父组件传递方法。使用$emit。

methods:{
    delectData(index){
    this.$emit("callback",index);
    }
}