vue.js 구성 요소 템플릿에 소품이 있는지 확인하십시오.

vue.js 구성 요소 템플릿에 소품이 있는지 확인하십시오.

여러 가지 변형을 시도한 후 구성 요소의 슬롯 또는 부분 코드를 적절하게 스타일링하는 방법을 알 수 없음<template></template>단면도

소품 여부를 확인할 수 있는 방법은 없을까?<counter :recent="true"></counter>상위 레벨로부터 존재하기 때문에Counter.vue단면적으로<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>

여기에 대한 기본값: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>

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는 설명서에 설명된 대로 동일한 요소에 대해 여러 클래스 선언을 자동으로 결합한다는 점에 유의하십시오.

참조URL: https://stackoverflow.com/questions/46315076/check-if-props-in-vue-js-component-template-exists