自定义组件与prop

1. 了解介绍 自定义组件与prop

在 uni-app 中使用 Vue 是必然的,因为 uni-app 它的组件比较少,需wVue 的组件,比如自定义组件就是页面之间,跳转什么的都有一样的所以不可能没次都写,所以我们可以通过自定义组件去写一次就好了,之后只需要调用在修改一下就好了;比如浏览器你搜索一个东西和另一个东西的时候他显示的就是内容不一样而已:所以我们先来学习一下自定义组件:

2. 自定义组件

 先到 Vue 中查看;红色的框为他的头部导航,然后绿的为内容导航,黄色的为内容中的具体内容值,

蓝色的为侧边导航,白色的是侧边导航内容,灰色是由他们所组成的页面;

然后我们可以在看 uni-app 的教程是容易一点的

而 Vue 中的更官方一点;

2.1 创建自定义组件

自定义组件 分为全球注入和局部,我们就先看看局部注入吧,也就是当我们需要使用自定义组件时需要在项目中创建一个文件夹名为: components 创建好后,右键他会比我们平时多一个创建选项你创建的组件一般有两种名字的定义规格,一个是骆峰类名,一个是 用户-组件名 :默认模板时需要使用SCSS的模板

创建好后他的页面是V2的页面所以我们需要修改成V3的页面:

修改成 V3 后我们为他编写代码 比如图片或者文字:编写完后在修改你要调用他的页面,

2.2 编写自定义组件代码

直接使用<组件名>< /组件名>就好了,然后我们看一下效果:

2.3 for 循环自定义组件

他也可以使用多吃,可以循环也可以调用多次,效果都是一样的,一般推荐使用 v-for :

3. Props传值

3.1 Props赋值

直接在<script>标签中定义一个  defineProps()去接受值,在index页面直接在你调用的页面上添加你在 defineProps() 中添加的变量去等于就好了,绿色的是组件页面的代码,不要搞混了;

3.2 Props设置默认值

因为下面的没给他值所以显示为空,所以我们去给他设置一个默认值;                                              他需要编写在 import { ref } from 'vue';  里,并且设置默认值的话,需要讲属性设置为对象, name 的对象 type 为 name 的类型, default 为默认值,img因为没给他设置初始值所以他的就设置为                 img:数据类型

props传过来的值只能在上方显示,不能在下方显示,需要为他设置一个变量

3.3  修改Props传值

然后呢他传过来的值是只读的如果要修改需要使用计算属性,直接修改会报错;

3.4 Props传输对象

当然他传了字符串也是可以创对象的,但是对象的话会比较严格,使用多个自定义组件有一的值没传就会报错,所以我们需要结合上面的为对象设置默认值,然后 默认值default 需要编写成一个函数 ;

3.5 遍历循环数组对象 Props 传输对象

只需要讲调用组件的页面进行修改就好了,他这个是更具数组的个数来输出,就更好操作了;