uniapp父子组件传值3种方法(props、slot和ref)
更新时间：2023年07月22日 11:02:20 作者：1VR
这篇文章主要给大家介绍了关于uniapp父子组件传值的3种方法,方法包括props、slot和ref,最近看到uniapp组件传值的方法,这里记录一下,需要的朋友可以参考下
前言
uniapp，父组件向子组件传值有三种方法，分别为props、slot，和ref
1、props
这个应该是最简单最常用的方法，就是子组件写变量，然后把变量名字在js中进行props
<template>
<view>
<!-- 我是子组件 newzujian-->
<view class="">
{{value}}
</view>
</view>
</template>
<script>
export default {
props:['value'],
methods:{
}
}
</script><template>
<view>
<!-- 我是父组件 -->
<newzujian value='789' >
</newzujian>
</view>
</template>
<script>
export default {
methods: {
}
}
</script>2、slot
插值比较灵活，可以在任何需要写入的地方进行slot ，slot写入name标签后，在父组件进行插值#name
<template>
<view>
<!-- 我是子组件 newzujian-->
<view class="">
<slot name="value"></slot>
</view>
</view>
</template>
<script>
export default {
methods:{
}
}
</script> <template>
<view>
<!-- 我是父组件 -->
<newzujian >
<template #value>
789
</template>
</newzujian>
</view>
</template>
<script>
export default {
methods: {
}
}
</script>3、ref 函数控制
这个是父组件调用子组件的函数进行对子组件进行操作
<template>
<view>
<!-- 我是子组件 newzujian-->
<view class="">
{{value}}
</view>
</view>
</template>
<script>
export default {
data(){
return{
value:''
}
},
methods:{
gaibian(){
this.value='789'
}
}
}
</script> <template>
<view>
<!-- 我是父组件 -->
<newzujian ref="hanshu" >
</newzujian>
<button @click="dianji">click</button>
</view>
</template>
<script>
export default {
onLoad() {
},
methods: {
dianji(){
this.$refs.hanshu.gaibian()
}
}
}
</script>总结
到此这篇关于uniapp父子组件传值3种方法(props、slot和ref)的文章就介绍到这了,更多相关uniapp父子组件传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在做页面时，如果想做一个链接点击后不做任何事情，或者响应点击而完成其他事情，我们可以使用javascript:void(0)，下面是具体的使用方法，感兴趣的朋友可以参考下2013-10-10
这篇文章主要介绍了js的toLowerCase方法用法,实例分析了toLowerCase方法用于转换小写的使用技巧,需要的朋友可以参考下2015-01-01
一个很基础的知识点，这篇主要是介绍JavaScript中基本数据类型和引用数据类型是如何存储的,需要的朋友可以参考下2018-03-03
这篇文章主要为大家详细介绍了JavaScript的包装类型，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
原生JavaScript来实现对dom元素class的操作方法(推荐)
这篇文章主要介绍了原生JavaScript来实现对dom元素class的操作方法,提供了代码toggleClass的测试例子，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。2017-08-08
长时间不适用javascript,就连其中的不等于的代码都不知道怎么写了，下面为大家简单介绍下，感兴趣的朋友不要错过2013-12-12
这篇文章主要介绍了JavaScript原生对象之Date对象的属性和方法详解,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了JavaScript变量的作用域的基本知识,是JavaScript入门学习中的基础知识,需要的朋友可以参考下2015-08-08
所谓"异步"，简单说就是一个任务分成两段，先执行第一段，然后转而执行其他任务，等做好了准备，再回过头执行第二段。比如，有一个任务是读取文件进行处理，下面小编来和大家一起学习一下2019-05-05
这篇文章主要介绍了JavaScript中的异步与同步详解,如果一个线程在一个节点中添加内容，另一个线程要删除这个节点,所以为了不必要的麻烦，js就是一门单线程语言,需要的朋友可以参考下2023-07-07
最新评论