课程地址：【新课uniapp零基础入门到项目打包（微信小程序/H5/vue/安卓apk）全掌握】 https://www.bilibili.com/video/BV1mT411K7nW/?p=12&share_source=copy_web&vd_source=b1cb921b73fe3808550eaf2224d1c155
四、vue组件
uni-app官网
组件，无论是小程序还是vue，都是非常关键的。
现在单页面程序，主要的依据就是组件。
组件的概念，可以将App.vue当做主组件，下面的vue文件都是若干个小组件。
component，小组件，可以公用。
组件优点：
4.1 easycom自动导入自定义组件
组件的注册
全局注册（需要挂载到vue里，适用于页面头部和底部十分公用的部分）和局部注册（写vue文件时局部注册用的较多）
局部注册
局部注册之前，在需要引用该组件的页面，导入你想使用的组件。
页面引入组件方式
4.1.1 介绍
2 通过uniapp的easycom。
4.1.2 具体实现
步骤1：在项目demo1右键，创建components目录
步骤2：创建组件，如图。
创建组件成功。
步骤3：自定义组件
步骤4：使用组件
效果
使用自定义组件生效。
4.2 子组件通过Prop接收父组件传过来的值
创建一个名为pubTitle的公共组件，到components文件夹下。自定义组件pubTitle。
<template>
<view class="pubTitle">
<view class="big">文章的标题</view>
<view class="small">副标题</view>
<view class="line"></view>
</view>
</template>
<script>
export default {
name:"pubTitle",
data() {
return {
};
}
}
</script>
<style lang="scss">
.pubTitle {
padding: 60rpx 30rpx;
text-align: center;
.big {
font-size: 50rpx;
font-weight: 700;
color: #333;
}
.small {
font-size: 28rpx;
color: #888;
}
.line {
display: inline-block;
width: 80rpx;
height: 8rpx;
background: #1aa034;
border-radius: 10rpx;
}
}
</style>在index首页里引入公共组件pubTitle。
注意：这里index使用的公共组件pubTitle也可以转为短横线连接的，即pub-title。
4.2.1 动态标题
uni-app官网
在index首页，list新闻列表页和about关于我们页，都是用了pubTitle公共组件。
标题显示的内容都是一样的，如下图。
现在想动态显示不同页面的标题。
uni-app官网
Prop传值
步骤① 在子组件里接收属性。如图，在pubTitle子组件里接收title属性。
步骤②，在父组件里传入属性值。
效果
副标题同理，
4.2.2 props绑定动态值及数据类型默认值
这里是在template里设置的标题
要绑定js里的值，那么就要绑定动态值，首先在data里定义text。
然后给子组件传属性值的地方绑定该属性值，
vue官网介绍的Props，Props | Vue.js
数据类型默认值，将props由数据改为对象，可以设置props绑定的值的默认类型。
不同数据类型默认形式
props: {
title: {
type: String,
default: "默认标题"
},
subtitle: {
type: String,
default: "默认副标题"
},
time: {
type: Number,
default: Date.now()
},
list: {
type: Array,
default() {
return [1, 2, 3];
}
},
obj: {
type: Object,
default() {
return {name: '无名氏', gender: '3'};
}
}
},4.3 emit子向父组件传值
子组件pubTitle向父组件传值。
新建一个myevent组件，然后在about里引入。about是父组件，myevent是子组件。
父组件向子组件传值（4.2节的内容，复习一下）。
步骤1：定义要传的值的具体值；
步骤2：调用子组件。
步骤3：传入要传的值。
子组件接收父组件传来的值。
步骤1：通过props接收父组件传来的值，可以设置默认类型等。
步骤2：在template中使用接收的值。
子组件向父组件传值。
input | uni-app官网。inpout的@input事件。只要输入框改变，就会触发input事件
子组件一般不会进行数据处理，都会将数据交给父组件去处理。
步骤1：给子组件绑定input事件
步骤2：通过事件处理函数将input输入框的内容传给父组件。通过this.$emit方法传递，第一个参数是自定义的方法名，第2个参数是要传递的值。
步骤3：父组件接收子组件传来的值
父组件绑定自定义事件，这里的自定义事件与子组件的自定义方法名同名。然后在事件处理函数里接收子组件传来的值。
4.4 事件修饰符
4.4.1 native修饰符
问题：给自定义组件添加click事件，无法触发。
如果要自定义组件也执行原生的事件，需要加上.native修饰符，这样才会被认为是原生事件，否则会被认为是自定义事件，如下。
<myevent title="组件间的传值" @myvalue="onmyvalue" @click.native="onClick"></myevent>4.4.2 父子间通信传值案例
父组件里点击一个按钮，弹出一个弹窗，弹窗有一个关闭按钮，点击弹窗的关闭按钮可以关闭弹窗，父组件就看不到弹窗了。
新建一个组件。
子组件接收的从父组件传来的值，最好不要改变。父组件传给子组件的值，不允许在子组件里修改。因为这个值是响应式的，因此如果在子组件修改了这个值，可能父组件会产生不同步的数据。
正常实现
父组件about.vue
子组件mypop.vue
缺点：值传来传去的很麻烦。但是这个方式也是需要了解的。
4.4.3 sync修饰符
uni-app官网
对4.4.2案例来回传值进行简化。
方案一：
父组件
子组件
但是我本地运行出错，不知道为什么。就这样吧，下一个。
进一步简化：
直接给要传的值加一个修饰符sync（代表响应式的修饰符），代表数据是可以响应的。接收子组件传值的自定义事件可以删掉。
理解：将sync修饰符理解为v-model，实现父组件改变值对子组件进行响应，同时子组件改变值也会对父组件进行响应。
父组件
子组件，不做任何处理，维持原样。
全部代码
父组件
<template>
<view>
<myevent :title="title" @myvalue="onmyvalue"></myevent>
<pubTitle></pubTitle>
<pub-title></pub-title>
<text>关于我们</text>
<myevent title="组件间的传值" @myvalue="onmyvalue" @click.native="onClick"></myevent>
-----------------------------
<button @click="onClickBtn" >开启</button>
<!-- <mypop :state="state" @stateEnv="onStateEnv"></mypop> -->
<mypop :state.sync="state"></mypop>
</view>
</template>
<script>
export default {
data() {
return {
title: "组件间的传值",
state: false
};
},
methods: {
onmyvalue(e) {
console.log(e);
},
onClick() {
console.log(123);
},
onClickBtn() {
this.state = true;
}
}
}
</script>
<style lang="scss">
</style>
子组件
<template>
<view>
<view>----弹出框样式-----</view>
<view class="box" :style="{height: state?'300px':'0'}"></view>
<button size="mini" @click="onClickBtn">关闭</button>
</view>
</template>
<script>
export default {
name:"mypop",
data() {
return {
};
},
props: {
state: {
type: Boolean,
default: false
}
},
methods: {
onClickBtn() {
this.$emit("update:state", false);
}
}
}
</script>
<style lang="scss">
.box {
width: 300px;
height: 300px;
background-color: pink;
}
</style>自己悟一悟。文章来源：https://www.toymoban.com/news/detail-807636.html
4.5 生命周期
全局配置 | uni-app官网文章来源地址https://www.toymoban.com/news/detail-807636.html
到了这里，关于【b站咸虾米】chapter4_vue组件_新课uniapp零基础入门到项目打包（微信小程序/H5/vue/安卓apk）全掌握的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
