主要发现了如下两个问题,有人遇到过么?
问题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?
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…