Question

经过多次尝试后，我不知道如何在<template></template>部分内正确设置组件的插槽或部分代码的样式。

有没有办法检查来自父级别的道具<counter :recent="true"></counter>是否存在，所以在Counter.vue部分<template></template>我会为它显示一个特殊的html标记？

===更新===

＆＃13;

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: ''
  }
});

＆＃13;

<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>

＆＃13;

Answer 1

此处recent的默认值为false，如果从recent传递parent，则会在子项中设置它。

只需使用此处提到的详细道具定义即可。 https://vuejs.org/v2/guide/components.html#Prop-Validation

删除v-text="number"，因为它会覆盖范围的内部内容，因此v-if将永远不会执行。

这是一个有效的例子

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>

Answer 2

您应该添加一个条件类绑定，最终从css / sass / stylus / less设置样式。

这可以按如下方式完成：

<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>

请注意，vuejs会自动combine multiple class declarations on the same element without problems, as described in the manual。

检查vue.js组件模板中的props是否存在

2 个答案: