uni-app 新手入门到精通1 https://blog.csdn.net/renxiaoxing55/article/details/109073564
uni-app 新手入门到精通2 https://blog.csdn.net/renxiaoxing55/article/details/109079171
uni-app 新手入门到精通完结 https://blog.csdn.net/renxiaoxing55/article/details/109117750
1, 组件的创建使用和组件的生命周期
引入组件=>注册组件=>使用组件
<template>
<view>
<test></test>
</view>
</template>
import test from '../../components/test.vue'
export default {
components: {
test:test,
},
}
组件生命周期,我就说说常用的几个吧(组件中触发的)
created 在实例创建完成后被立即调用 通俗点就是页面渲染完成之后触发的
beforeMount 还没有渲染到页面上去 mounted已经渲染上去了,以后想操作dom直接在mounted进行操作
不明白的,看组件的内容打印结果就可以了
<template>
<view id="myView">
这是test组件{
{
num}}
</view>
</template>
<script>
export default {
data() {
return {
num: 3,
};
},
beforeMount () {
console.log('beforemount',document.getElementById('myView'))
},
mounted() {
console.log('mounted',document.getElementById('myView'))
},
}
</script>
2,组件之间的通讯方式
父传子
父组件
<template>
<view>
<test :title="title"></test>
</view>
</template>
<script>
import test from '../../components/test.vue'
export default {
components: {
test:test, //注册组件
},
data() {
return {
title:"hello"
}
},
}
</script>
子组件
<template>
<view>
<view>这是父组件传递过来{
{
title}}</view>
</view>
</template>
<script>
export default {
props: ['title'],
}
</script>
子传父 通过$emit来触发自定义的事件
子组件
<template>
<view id="myView">
<button @click="send">给父组件传值</button>
</view>
</template>
<script>
export default {
data() {
return {
num: 3,
};
},
props: ['title'],
methods: {
send(){
this.$emit("rereceive",this.num)
}
},
}
</script>
父组件
<template>
<view>
<test :title="title" @rereceive="getnum"></test>
<view>这是子组件传递过来的数据{
{
num}}</view>
</view>
</template>
<script>
import test from '../../components/test.vue'
export default {
components: {
test:test,
},
data() {
return {
num:0
}
},
methods: {
getnum(num){
this.num = num
},
}
</script>
兄弟组件传值
this.$on 注册一个全局事件 this.$emit触发全局事件
A组件
<template>
<view>
这是a组件：<button @click="addNum">修改b组件的数据</button>
</view>
</template>
<script>
export default {
methods: {
addNum () {
uni.$emit('updateNum',10)
}
}
}
</script>
B组件
<template>
<view>
这是b组件的数据:{
{
num}}
</view>
</template>
<script>
export default {
data() {
return {
num: 0
};
},
created(){
uni.$on('updateNum',num=>{
this.num+=num
})
}
}
</script>
父组件
<template>
<view>
<test-a></test-a>
<test-b></test-b>
</view>
</template>
<script>
import test from '../../components/test.vue'
import testA from '../../components/a.vue'
import testB from '../../components/b.vue'
export default {
components: {
test:test,
"test-a": testA,
"test-b": testB,
},
}
</script>
<style>
</style>
3,uni-ui 组件库组件库的基本介绍和使用
一些默认提供的组件 不能够完善项目的开发 (位置 组件=>扩展组件)
点击 使用HBuilderX导入插件=>打开HBuilderX(我们会发现在componts下有新的文件生成)
<template>
<view>
<uni-calendar
:insert="true"
:lunar="true"
:start-date="'2019-3-2'"
:end-date="'2019-5-20'"
@change="change"
>
</uni-calendar>
</view>
</template>
<script>
import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
export default {
components: {
uniCalendar
},
methods: {
change(e){
console.log("组件被触发了",e)
},
}
</script>