uni-app 组件传值,组件方法调用
文章目录
----------------------------------------------------------------------------
1:父组件向子组件传值
子组件:download.vue
</template>
<view> {{downloadmsg}} </view>
</template>
<script>
export default{
props: {
downloadmsg: {
type: String,
default: true
}
}
}
</script>
- 使用 props 接收,并设置 type 类型
- default
①:type:String
downloadmsg: {
type: String,
default: true
}
②:type:Array
downloadmsg: Array,
default() {
return ['', ''];
}
③:type:Object
downloadmsg: {
type: Object,
default() {
return {};
}
},
④:type:Boolean
downloadmsg: {
type: Boolean,
default: true
},
父组件:index.vue
<template>
<view>
<download :downloadmsg="downloadmsg"></download>
</view>
</template>
<script>
import download from "../../components/download/download.vue"
export default{
components:{
download
},
data() {
return {
downloadmsg:"世界你好"
}
},
}
</script>
- import:引入子组件
- components:注册子组件
- downloadmsg:传输值的内容
----------------------------------------------------------------------------
2:父组件调用子组件方法
子组件:download.vue
</template>
<view> {{downloadmsg}} </view>
</template>
<script>
export default{
methods:{
childdown(){
console.log("hello world");
}
}
}
</script>
父组件:index.vue
<template>
<view>
<view @click="childMeth">调用子组件方法</view>
<download ref="downloadmeth"></download>
</view>
</template>
<script>
import download from "../../components/download/download.vue"
export default{
components:{
download
},
methods:{
childMeth(){
this.$refs.downloadmeth.childdown();
}
}
}
</script>
- import:引入子组件
- components:注册子组件
- ref:为子组件设置一个 id
- this.$refs:使用子组件 id ,调用子组件方法
----------------------------------------------------------------------------
3:子组件调用父组件方法并传值
子组件:download.vue
</template>
<view @click="childMeth"> 点我传值 </view>
</template>
<script>
export default{
methods:{
childMeth(){
this.$emit("parentMeth","世界你好");
}
}
}
</script>
- this.$emit:调用父组件方法
父组件:index.vue
<template>
<view>
<download @parentMeth="parent" ref="downloadmeth"></download>
</view>
</template>
<script>
import download from "../../components/download/download.vue"
export default{
components:{
download
},
methods:{
parent(e){
console.log(e);
}
}
}
</script>
- import:引入子组件
- components:注册子组件
3:子组件生命周期
方法 | 描述 |
---|---|
beforeCreate | 组件初始化,但数据原生观测、自定义观测(event\watcher)没生成之前。 未完全创建阶段 |
created | 组件创建后,但还未挂载 完全创建阶段 |
beforeMount | 组件渲染后,挂载前。 渲染后待挂载 |
mounted | 组件挂载到页面 可用 vm.$el 访问 挂载完成 |
beforeUpdate | 虚拟 DOM 重新渲染和打补丁之前 再次渲染前 |
updated | 组件 DOM 已经更新 再次渲染后 |
activated | keep-alive 组件激活时调用。 当前组件被激活:显示 |
deactivated | keep-alive 组件停用时调用。 当前组件隐藏 |
beforeDestroy | 实例销毁之前调用。实例仍然完全可用。 销毁前 |
destroy | Vue 实例销毁后调用 |