Vue自定义封装组件

Vue自定义封装组件

1.在components文件夹下创建一个自定义组件名称的Vue文件，对组件进行相应的布局，添加样式，在script标签中的Vue实例下添加props对象，用来接收动态属性并设置其数据类型，例

props:{
  	title : String,
    price : [Number,String],
}

通过$emit派发自定义事件：

  <div  @click="eventType"></div>//自定义事件
  <script>
	export default {
	    methods:{
	        eventType(){
	            this.$emit('click',[需要传递的参数])//click 调用组件时添加的事件名称
	        }
	    }
	}
</script>

2.调用自定义组件

• 对自定义组件进行引入并进行命名

<script>
	import GoodCard from '@/components/GoodCard'
	export default {
	  components:{
	    "good-card" : GoodCard
	  },
	}
</script>

3.然后就可以对自定义组件进行使用了

示例

实现一个简单的商品卡片

自定义组件Vue文件（css样式没有写进来）

<template>
  <div class="cardList" @click="goCart">
      <img class="cardImg" :src="mainPic">
      <div class="listContent">
        <span class="cardTit">{{ title }}</span>
        <span class="cardPrint">
            ￥{{ price }}
        </span>
      </div>
  </div>
</template>

<script>
export default {
    props:{
        title : String,
        price : [Number,String],
        mainPic : String
    },
    methods:{
        goCart(){
            this.$emit('click')
        }
    }
}
</script>

调用自定义组件Vue文件

<template>
	<good-card v-for="(item,index) in shopList" 
                  :key="index" 
                  :title="item.title" 
                  @click="goCard(item)"
                  :price="item.originalPrice" 
                  :mainPic="item.mainPic">
     </good-card>
</template>

<script>
import GoodCard from '@/components/GoodCard'//引入自定义组件
export default {
  components:{
    "good-card" : GoodCard //设置组件标签名
  },
  methods:{
    goCard(item){
      //对应执行事件
    }
  },
}

读取数据后效果图

Vue单向数据流
所有的 prop 都使得其⽗⼦ prop 之间形成了⼀个单向下⾏绑定：⽗级 prop 的更新会向下流动到⼦组件中，但是反过来则不⾏。这样会防⽌从⼦组件意外改变⽗级组件的状态，从⽽导致你的应⽤的数据流向难以理解。
额外的，每次⽗级组件发⽣更新时，⼦组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在⼀个⼦组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。⼦组件想修改时，只能通过 $emit 派发⼀个⾃定义事件，⽗组件接收到后，由⽗组件修改。