uniApp 父与子 组件之间通信
学uniapp推荐先学vue,学uniapp推荐先学vue,学uniapp推荐先学vue。1.首先我们创建一个子组件,在components 目录下面创建一个demo.vue,在 demo.vue里面定义一个{{msg}} ,稍等这个值将会从父传递过来。2.父里面引用子组件 (注意:有时候在引用组件的时候 import 组件名 from '组件地址';会不注意的时候填写为 import {组件名}
·
1.首先我们创建一个子组件,在components 目录下面创建一个demo.vue,在 demo.vue里面定义一个{{msg}} ,稍等这个值将会从父传递过来。
<template>
<view>
{{msg}}
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
2.父里面引用子组件 (注意:有时候在引用组件的时候 import 组件名 from '组件地址';
会不注意的时候填写为 import {组件名} ..... 这个是会报错,会提示 组件未注册的
所以引入组件的时候不要带上{ }
<template>
<view class="content">
<demo :msg="msg"></demo>
</view>
</template>
<script>
import demo from '../../components/demo/demo.vue';
export default {
components:{
demo
},
data() {
return {
msg:'12312sad312313'
}
},
onLoad() {
},
methods: {
}
}
</script>
3.在父里面设置msg参数,并绑定在子组件 :msg="msg"
<demo :msg="msg"></demo>
4.绑定之后,我们在子组件里面接收这个参数,保存运行一下,就可以了。
<template>
<view>
{{msg}}
</view>
</template>
<script>
export default {
props:['msg'],
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)