uniapp父子组件之间传值
组件传值一. 父组件向子组件传值通过props来实现, 子组件通过props来接收父组件传过来的值父组件// 1. 引入子组件import zi from '../../components/zi.vue'// 2. 在components中对子组件进行注册export default {components:{zi}}<!-- 以标签的形势载入; 通过数据绑定的形势进行传值 -->&
·
组件传值
一. 父组件向子组件传值
通过
props
来实现, 子组件通过props来接收父组件传过来的值
- 父组件
// 1. 引入子组件
import zi from '../../components/zi.vue'
// 2. 在components中对子组件进行注册
export default {
components:{
zi
}
}
<!-- 以标签的形势载入; 通过数据绑定的形势进行传值 -->
<zi :userInfo="张三"></zi>
- 子组件
//1.通过props接收父组件中传过来的值
props:['userInfo']
<!-- 2.在标签中直接使用 -->
<view>{{userInfo}}</view>
二. 子组件向父组件传值
子组件通过事件来向父组件传值
- 子组件
<template>
<view @click="send">
点击传值
</view>
</template>
<script>
export default{
methods:{
//点击事件
send: function(){
//向父组件传值
this.$emit("sendData", "我是子")
}
}
}
</script>
- 父组件
<template>
<view>
<zi @sendData="getData"></zi>
</view>
</template>
<script>
//1.导入子组件
import zi from '../../components/zi.vue';
//2.注册子组件
export dufault {
components: {
zi
},
methods: {
getData: function(res){
console.log(res) //我是子
}
}
}
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)