<button>在子组件中</button>隐藏父组件<button>元素</button>

Question

我试图在子组件的父组件中隐藏一个按钮。我使用道具来绑定元素并使用 v-show 指令隐藏它，但不是隐藏按钮，而是隐藏整个选项卡。

这是我的父组件：

<div class="col-lg-auto" v-if="unpaid.qr_code === 1">
    <q-btn glossy
           size="md"
           :label="$t('Common.GetQrCode.Button')"
            @click="makePayment(unpaidIndex, true)" color="positive"
            v-bind="share">
    </q-btn>
</div>

<div class="col-lg-auto" v-if="unpaid.qr_code === 1">
       -- OR --
</div>

props: {
  share: {
    type: Boolean,
    default: true
  },

这个组件也在其他组件中使用，至于我的子组件是

<payment-tab v-if="depositRefundID !== undefined && depositRefundID !== null && depositRefundID !== '' && loadingComplete" v-show:share="false">

Answer 1

把孩子藏起来会是个好主意。

或者如果你想以这种特定的方式，我已经在反应中解决了这样的情况。

我将从父级传递一个函数给子级； 此函数将更新父组件中的数据，并确定天气以显示子组件。

new VueComponent('parent', {
    template: `
    <div class="...">
        <child-component v-for="obj in object_list" v-if="obj.show" />
    </div

    data: {
       object_list: [
           {show:true, id:1, ...},
           {show:true, id:2, ...},
           {show:false, id:3, ...}
       ]
    },
    methods: {
        toggle_show: function(item_id){
              let item = this.object_list.filter(_item => {_item.id === item_id})
              item.show = !item.show;
        }
    }
})