javascript 检查 vue.js 组件模板中的 props 是否存在
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46315076/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Check if props in vue.js component template exists
提问by aspirinemaga
After tried many variations, I don't know how to properly style a component's slot or partial code within <template></template>section.
在尝试了许多变体之后，我不知道如何在部分中正确设置组件的插槽或部分代码的样式<template></template>。
Is there a way to check if props <counter :recent="true"></counter>from parent level exists, so in a Counter.vuein section <template></template>i would show a special html markup for it ?
有没有办法检查<counter :recent="true"></counter>来自父级的道具是否存在，所以在Counter.vuein 部分<template></template>我会为它显示一个特殊的 html 标记？
=== UPDATED ===
=== 更新 ===
Vue.component('counter', {
template: `
<span class="counter" :number="21" v-text="number">
<span v-if="recent">
since VARTIME
</span>
</span>
`,
data: function(){
return{
count: this.number + 1
}
},
props: {
number: Number,
recent: {
type: Boolean,
default: false
}
},
computed: {
},
created(){
if( this.recent === true ){
console.log('mounted recent true');
}
}
});
new Vue({
el: "#app",
data: {
count: ''
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
<counter :number="20" :recent="true"></counter>
</div>采纳答案by Thusitha
Here the default value for the recentwill be falseand if the recentis passed from the parentit will get set in the child.
这里recentwill的默认值是false，如果从recent传递过来，parent它将在子进程中设置。
Just use the detailed props definition as mentioned here. https://vuejs.org/v2/guide/components.html#Prop-Validation
只需使用此处提到的详细道具定义即可。 https://vuejs.org/v2/guide/components.html#Prop-Validation
Remove the v-text="number"as it overrides the internal content of the span and therefore the v-if will never executes.
删除 ，v-text="number"因为它覆盖了跨度的内部内容，因此 v-if 将永远不会执行。
This is a working example
这是一个工作示例
Vue.component('counter', {
template: `
<span class="counter" :number="21">
<span v-if="recent">
since VARTIME
</span>
</span>
`,
data: function(){
return{
count: this.number + 1
}
},
props: {
number: Number,
recent: {
type: Boolean,
default: false
}
},
computed: {
},
created(){
if( this.recent === true ){
console.log('mounted recent true');
}
}
});
new Vue({
el: "#app",
data: {
count: ''
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
<counter :number="20" :recent="true"></counter>
</div>
回答by Ferrybig
You should add a condition class binding, that you eventually style from css/sass/stylus/less.
您应该添加一个条件类绑定，最终从 css/sass/stylus/less 设置样式。
This can be done as follows:
这可以按如下方式完成：
<template>
<span class="counter" v-text="count" :class="{ cssClassName: recent}">
<slot></slot>
<span v-if="recent">
since VAR_DATETIME <i class="fa fa-refresh" @click="updateList"></i>
</span>
</span>
</template>
Notice that vuejs will automatically combine multiple class declarations on the same element without problems, as described in the manual.
请注意，vuejs 会自动在同一元素上组合多个类声明而不会出现问题，如手册中所述。
