v-if 每个组件加载时

Posted 2023-02-23

【中文标题】v-if 每个组件加载时

【英文标题】：v-if per component when loaded

【发布时间】：2019-07-13 05:58:43

【问题描述】：

目前，我正在将一些组件加载到一个更大的网格组件中（只是一个用于分组和显示子组件的组件）。

我想根据对象数据“featureButtonLink”是否为“''”来显示/隐藏按钮。 （如果不相等，则显示按钮）。

问题是，我不确定切换 v-if 的逻辑应该在子组件上，还是在数组本身所在的“网格”组件上。

这是我的代码示例 -

在子组件上：

<div v-if="link">
<h1>button here</h1>
</div>

<script>
export default 
    name: 'FeatureWork',
    props: [
        'featureTitle', 'featureDescription', 'featureImage', 'featureClass', 'featureButtonLink', 'featureButtonText',
    ],

    data () 
        return 
            link: false
        
    ,

    computed: 
        linkCheck: function() 
            if (this.featured.id.featureButtonLink != '') 
                this.link = true
                return this.link
            
        
    


</script>

并且，这是我的“网格”组件（我正在使用 v-for + 数组数据加载子组件的组件，其中的值内部称为“featureButtonLink”）：

<template>
<div class="feature-work-row card-hover" :class="featureClass">
<div class="work-wrapper">
<!-- <div class="project-tags">
<p class="p-small text-weight-semi">Web Design</p>
<p class="p-small text-weight-semi">Web Design</p>
</div> -->



<div class="columns">
<div class="content">
<h4 class="text-weight-bold"> featureTitle </h4>
<p class="p-small text-color-regblue"> featureDescription </p>


<div class="button-container btn-main">
<router-link :to="featureButtonLink"><p class="p-small text-weight-semi"> featureButtonText </p></router-link>
</div>

<div v-if="link">
<h1>hey there</h1>
</div>
</div>

<div class="image">
<div class="image-wrapper">
<img :src="featureImage">
</div>

</div>
</div>



</div>
</div>
</template>

<script>
export default 
name: 'FeatureWork',
props: [
'featureTitle', 'featureDescription', 'featureImage', 'featureClass', 'featureButtonLink', 'featureButtonText',
],

data () 
return 
link: false

,

computed: 
linkCheck: function() 
if (this.featured.id.featureButtonLink != '') 
this.link = true
return this.link





</script>

或者，我猜另一个问题可能是......

如何从加载数据的组件中更改子组件的布尔值。

我的子组件使用“父”组件上的数组加载到 v-if 中。 如何将数据“true”传递回我的子组件，以决定是否在该按钮上显示（或不显示）按钮（同时使用 v-if）。

【问题讨论】：

为什么要计算 link 数据项和 linkCheck 而不仅仅是计算 link？

【参考方案1】：

computed 的意义在于缓存您的数据，但您使用它的方式需要调用它。

这里有一些选项...

1 使用computed

按预期使用计算，通过返回值：

    data () 
        return 
    ,

    computed: 
        link: function() 
            return this.featured.id.featureButtonLink != '';
        
    

2 使用watch

    data () 
        return 
            link: false
        
    ,

    watch: 
      featured:
        immediate: true
        handler: function(val) 
            if (val.id.featureButtonLink != '') 
                this.link = true
                return this.link
            
        
      
    

3 使用mounted生命周期钩子

如果 prop 没有更改，则基于传递的 prop 值一次性渲染，则使用计算的没有什么好处。相反，您可以只使用 mounted 生命周期挂钩，这将使其仅在挂载时运行。这意味着它不会对值的变化做出反应，所以我不会展示这个例子。

【讨论】：

并且，这应该在子组件上进行，还是在通过数组呈现组件的组件上进行？而且，如果它应该显示在任何一个上，我如何将数据传递给每个组件？ （例如，通过 props 使用 v-bind 传递要在子组件上显示的其他数据）如何将内容传递到子组件的数据中？

这应该在孩子身上完成，将数据作为道具传递给孩子使用propvuejs.org/v2/guide/components-props.html