uniapp中组件传值1、⽗组件传⼦组件
⽗组件内部写法：
<template>
<view>
<h2>⾸页</h2>
<!-- 绑定⾃定义属性传递数据 -->
<Two :value="valPar"></Two>
</view>
</template>
<script>
//引⼊⼦组件
import Two from "../../components/two/two.vue"
export default {
data() {
return {
valPar:"⽗组件传递过来的值"
}
},
components:{
Two//注册⼦组件
},
methods: {
}
}
</script>
⼦组件内部写法：
<template>
<h2>two组件收到:{{value}}</h2>
</template>
<script>
export default {
props:{
value:{
type:String,
default:"默认值"
}
},
data() {
return {
}
},
created(){
}
}
</script>
2、⼦组件传⽗组件 -- 写法1
⽗组件内部写法：
<template>
<view>
<!-- 接收到⼦组件传递的数据 -->
<h2>接收到的值:{{valueChild}}</h2>
<!-- 在⼦组件标签上绑定⼦组件内部对应事件，并触发对应回调 -->
<One @Transmit="handle"></One>
</view>
</template>
<script>
//引⼊⼦组件
import One from "../../component/one.vue"
export default {
data() {
return {
valueChild:"",//定义属性接收数据
}
},
components:{
One//注册⼦组件
},
onLoad(){
},
methods:{
// ⼦组件内部触发事件对应回调handle
handle(val){
this.valueChild=val;
}
}
}
⼦组件内部写法：
<template>
<view>
<h2>one组件</h2>
<!-- 点击按钮进⾏事件触发 -->
<button @click="handleTransmit">点击给⽗组件传值</button>    </view>
</template>
<script>
export default {
data() {
return {
//要传递的数据
valueParent: "⼦组件传递过来的数据"
}
},
methods: {
handleTransmit() {
// 进⾏事件触发，传递数据
this.$emit("Transmit", this.valueParent)
}
}
}
</script>
</script>
⼦组件传⽗组件 -- 写法2
⽗组件内部写法：
<template>
<view>
<!-- 接收到⼦组件传递的数据 -->
<h2>接收到的值:{{valueChild}}</h2>
<Two></Two>
</view>uniapp 字符串转数组
</template>
<script>
/
/引⼊⼦组件
import Two from "../../components/two/two.vue"
export default {
data() {
return {
valueChild:"",//定义属性接收数据
}
},
components:{
Two//注册⼦组件
},
onLoad(){
// 进⾏事件绑定,val为⼦组件传递的数据
uni.$on("Transmit",(val)=>{
this.valueChild=val;
})
}
}
</script>
⼦组件内部写法：
<template>
<view>
<h2>two组件</h2>
<!-- 点击按钮进⾏事件触发 -->
<button @click="handleTransmit">点击给⽗组件传值</button>    </view>
</template>
<script>
export default {
data() {
return {
//要传递的数据
valueParent: "⼦组件传递过来的数据"            }
},
methods: {
handleTransmit() {
// 进⾏事件触发，传递数据
uni.$emit("Transmit", this.valueParent)            }
}
}
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。