Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
384 views
in Technique[技术] by (71.8m points)

在Weex中使用Vue,子组件与父组件通信问题

  • weex-vue-render: 0.10.0

主要发现了如下两个问题,有人遇到过么?

  • v-model 双向绑定在组件中(native端)无效?

  • 父子组件通信在web端与native端实现方式不同?有bug?

问题1:发现v-model双向绑定,在native端无法使用,需要自己手动实现

// 在native端,我需要使用如下方式,手动实现数据双向绑定,无法直接使用 v-model
<its-navbar :value="selected" @input="selected = arguments[0]">
            <its-tab-item id='1'><text class="its-text text-size-middle">Tab1</text></its-tab-item>
            <its-tab-item id='2'><text class="its-text text-size-middle">Tab2</text></its-tab-item>
            <its-tab-item id='3'><text class="its-text text-size-middle">Tab3</text></its-tab-item>
</its-navbar>
// 但是在web端运行的话,我可以直接使用如下方式
<its-navbar v-model="selected">
            <its-tab-item id='1'><text class="its-text text-size-middle">Tab1</text></its-tab-item>
            <its-tab-item id='2'><text class="its-text text-size-middle">Tab2</text></its-tab-item>
            <its-tab-item id='3'><text class="its-text text-size-middle">Tab3</text></its-tab-item>
</its-navbar>

问题2: 父子组件通信

// 父子组件通信时遇到如下问题
// 父组件:its-navbar 子组件:its-tab-item

// ========父组件实现 its-navbar.vue ==============
<template>
    <div class="its-navbar page-part" >
        <slot></slot>
    </div>
</template>
<script>
    var modal = weex.requireModule('modal');
    export default {
        name: 'its-navbar',
        props: ['value']
    }
</script>
// =======================================
// ========子组件实现 its-tab-item.vue ==========
<template>
    <div class="its-tab-item" 
        @click="clicked" 
        :style="styleClicked"
        >
        <div class="its-tab-item-icon">
            <slot name="icon"></slot>
        </div>
        <div class="its-tab-item-label">
            <slot></slot>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'its-tab-item',
        props: {
            id: {}
        },
        data() {
            return {

            }
        }
        methods: {
            clicked() {
                console.log('item clicked');
                // 子组件 被点击时,
                // 触发父组件的input事件,更改父组件绑定的value的值, 
                // 在native端这种实现方式是正确的。
                this.$parent.$emit('input', this.id);
                // 但是在web端又不正确了,
                // web端无法直接获取$parent,
                // 仔细看了下获取到的对象,需要使用如下方式
                // this.$parent.$parent.$emit('input', this.id);
                // 看到差别了么? 在web端需要获取两次,即父亲的父亲.
            }
        }
    }
</script>
// ==================================================

有人遇到过这种问题么?或许这算是bug?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

问题1:native不支持双向绑定,自已在事件中更新。
问题2: 父子通信没问题,应该你代码问题


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

2.1m questions

2.1m answers

60 comments

57.0k users

...