vue imgBox组件

方案1：
<template>
<nuxt-link ref="imgBox" v-if="isLink" class="img-box" target="_blank" :to="{ path: ${link}}">
<img v-lazyload="$filter.imgCdn(src)" :alt="title" :title="title" />
</nuxt-link>

<div ref="imgBox" v-else class="img-box">
    <img v-lazyload="$filter.imgCdn(src)" :title="title" alt="title" />
</div>

</template>

<script>
export default {
props: ['link', 'src', 'title'],
// data () {
// return {
// }
// },
// methods: {
// },
// mounted () {
// },
computed: {
isLink () {
return this.link !== undefined // link 有可能是null或者''
}
}

}
</script>

<style lang="scss" type="text/scss">
</style>

方案2：有问题。
<template>
<nuxt-link ref="imgBox" v-if="isLink" class="img-box" target="_blank" :to="{ path: ${link}}">
<img v-lazyload="$filter.imgCdn(src)" :alt="title" :title="title" />
</nuxt-link>

<div ref="imgBox" v-else class="img-box">
    <img v-lazyload="$filter.imgCdn(src)" :title="title" alt="title" />
</div>

</template>

<script>
export default {
props: ['link', 'src', 'title'],
data () {
return {
isLink: null
}
},
methods: {
},
mounted () {
if (this.$refs.imgBox.hasAttribute('href')) { //取到的值一直是false，在mounted之前组件isLink已经确定，dom元素也跟着确定
this.isLink = true
} else {
this.isLink = false
}
},
computed: {
// isLink () {
// console.log(this.$refs.img) //$refs 只在组件渲染完成后才填充，并且它是非响应式的。它仅仅是一个直接操作子组件的应急方案——应当避免在模板或计算属性中使用 $refs。
// }
}

}
</script>

<style lang="scss" type="text/scss">
</style>