vue项目中对自定义组件定义&调用

自定义组件

在这里插入图片描述
组件的名称可写可不写
在这里插入图片描述

在index.vue页面引入该组件

注意:header.vue,我是在cart/index.vue页面中添加了模块,不是html标签,其实就是vue引入新的子组件

import vHeader from '@/components/header.vue' //导入自定义组件
export default {
  name: 'cart',
  components: {
    vHeader   // 相当于激活自定义组件
  }
}

在cart/index.vue中调用自定义组件

  <div>
      <v-header>购物车</v-header> // //这就是你引入的自定义模块;注意是驼峰命名法
    </div>

ps:说白了,自定义组件就好比封装,把一些公共的模块抽取出来,然后写成单独的的工具组件或者页面,在需要的页面中就直接引入即可。

另外,为了防止在同一页面写入过多的代码,不方便后期维护,便可以把整个页面分成多个小模块,然后在主页面进行模块引入,创建包括引入步骤都是一样的。

补充

slot 插槽:

思考:如果你封装一个提示组件,如何实现每次调用可以传递不同的参数?
回答:通过slot插槽

简介

顾名思义:定义组件时用 slot 留个口子,调用时插入数据到口子/槽

语法

后备(默认)内容
步骤1:定义组件时通过< slot >< /slot >占位留一个口子
步骤2:调用组件时(双标签中的内容就是【自动传递到口子里面的数据】)

具名插槽:

顾名思义占位的口子/槽有名字,调用的时候根据名字插入
向卡槽中插入数据

 <template v-slot:header="item">//item接受到的是对象,键->myNameJian :值->myName
    <h3>this is header</h3>                          //推荐键和值一样
    {{item.myName}}
</template>

定义卡槽并传入数据 (myName)

<slot name="header" :myNameJian="myName"></slot>->myNameJian :->myName
                                                  //推荐键和值一样

步骤1:定义组件时通过占位留一个口子/槽
步骤2:调用时根据标识插入数据(如果调用的时候没有写标识这插入默认槽)​

旧:<template slot:标识></template>
新:<template v-slot:标识></template>
作用域插槽:

调用组件,有时候需要使用组件模型中的数据
步骤1:定义组件是通过<slot name=“标识” v-bind:数据标识=“data中的键”>
< /slot>占位留一个口子/槽
步骤2:调用组件时候来接受数据

旧:<template slot:标识  slot-scope="任意名称"></template>
新:<template v-slot:标识="任意名称" ></template>
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值