- 创建子组件
<template>
<!-- 把 props中的src看成是data中的变量一样来使用-->
<image :src="src"></image>
</template>
<script>
export default {
name: "img-border",
//声明一下要接收的 父组件传递过来的属性
props:{
src:String
}
}
</script>
<style>
</style>
- 在父组件中引入子组件
<script>
import imgBorder from "@/components/img-border";
</script>
- 创建父组件数据
<script>
import imgBorder from "@/components/img-border";
export default {
data(){
return{
src:"我是数据",
}
}
</script>
- 注册自定义组件
<script>
// 2引入自定义组件
import imgBorder from "@/components/img-border";
export default {
data(){
return{
//3.创建父组件数据
src:"我是数据",
}
},
//4注册自定义组件
components:{
imgBorder
}
</script>
- 使用子组件
<!--5.使用组件-->
<img-border :src="src2"></img-border>
总结:
uni-app中父组件向子组件传递参数的用法和vue中一样,注意src前面要加上‘冒号’,冒号是vue语法中v-bind的缩写,它会将src后面的值解析为一个变量,而不是一个具体的值。