uni组件传值注意
原创
目录介绍
- 01.组件传值遇到坑
- 02.父组件传值给子组件
- 03.子组件传值给父组件
01.组件传值遇到坑
- 子组件给父组件传值注意点
- 注意子组件触发事件定义的方法，首先在父组件中需要绑定子组件内部对应事件，然后一定要和父控件接受的保持一致，否则无法传递数据。//在area.vue中，进行事件触发，传递数据 this.$emit('onConfirm',true, selectVal)
//在select-school.vue中，需要在在子组件标签上绑定子组件内部对应事件，并且方法名一致<!-- 地区选择器 --><optional :status='show' @onUpdate='onUpdate' @onConfirm='onConfirm'></optional>```- 遇到疑问？
- 要是同级的组件，那么该如何传递数据呢？
02.父组件传值给子组件
- 父组件的代码如下<!-- 父组件传子组件 --> <!-- 父组件内部写法 --> <template> <view> <h2>父组件</h2> <!-- 绑定自定义属性传递数据 --> <children style="color: #0000FF;" :value="valPar" ></children> </view> </template>
<script> //引入子组件 import children from "../../pages/ele/element-children1.vue" export default { data() { return { valPar:"父组件传递过来的值" } }, components:{ //注册子组件 children }, }</script>```- 子组件的代码如下<!-- 父组件传子组件 --> <!-- 子组件内部写法 --> <template> <h2>子组件收到:{{value}}</h2> </template>
<script> export default { props:{ value:{ type:String, default:"默认值" } }, data() { return { } }, }</script>```03.子组件传值给父组件
- 父组件的代码如下<!-- 子组件传父组件 --> <!-- 父组件内部写法 --> <template> <view> <!-- 接收到子组件传递的数据 --> <h2>父组件接收到的值:{{valueChild}}</h2> <!-- 在子组件标签上绑定子组件内部对应事件，并触发对应回调 --> <children style="color: #0000FF;" @Transmit="handle"></children> </view> </template>
<script> //引入子组件 import children from "../../pages/ele/element-children2.vue" export default { data() { return { //定义属性接收数据 valueChild:"", } }, components:{ //注册子组件 children }, methods:{ // 子组件内部触发事件对应回调handle handle(val){ this.valueChild=val; } } }</script>```- 子组件的代码如下<!-- 子组件传父组件 --> <!-- 子组件内部写法 --> <template> <view> <h2>子组件</h2> <!-- 点击按钮进行事件触发 --> <button @click="handleTransmit">点击给父组件传值</button> </view> </template>
<script> export default { data() { return { //要传递的数据 valueParent: "子组件传递过来的数据" } }, methods: { handleTransmit() { // 进行事件触发，传递数据 this.$emit("Transmit", this.valueParent) } } }</script>```原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录