<div id="app"> 
  <children> 
    <span>12345</span> 
    <!--上面這行不會(huì)顯示--> 
  </children> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    components: { 
      children: {  //這個(gè)無(wú)返回值，不會(huì)繼續(xù)派發(fā) 
        template: "<button>為了明確作用范圍，所以使用button標(biāo)簽</button>" 
      } 
    } 
  }); 
</script> 

<div id="app">
  <h2>自定義組件</h2>
  <custom>
   <!-- 當(dāng)卸載自定義標(biāo)簽之前的內(nèi)容，要混合子組件中的模板 -->
   <div>我是父組件提供的內(nèi)容，我的存在會(huì)替換子組件中slot標(biāo)簽內(nèi)的內(nèi)容</div> 
  </custom>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
 Vue.component('custom',{
  template:`
   <div>
    <slot>
     <div>我備用內(nèi)容，如果子組件中有內(nèi)容會(huì)替換我哦~</div>
    </slot>
   </div>
  `
 })
 new Vue({
  el:"#app"
 })
</script>

<div id="app">
  <h2>自定義組件</h2>
  <custom>
   <!-- <div slot="one">我替換one</div> -->
   <div slot="three">我替換three</div>
   <div slot="two">我替換two</div>
   <span slot="two">我替換two</span>
   <div slot="one">我替換one</div>
  </custom>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
 Vue.component('custom',{
  template:`
   <div>
    <slot name="one"> 
     <p>我是one</p>
    </slot>
    <slot name="two">
     <p>我是two</p>
    </slot>
    <slot name="three">
     <p>我是three</p>
    </slot>
   </div>
  `
 })
 new Vue({
  el:"#app"
 })
</script>

 <div id="app">
  <h2>自定義組件</h2>
  <custom>
   <!-- <div slot="one">我替換one</div> -->
   <div slot="three">我替換three</div>
   <div slot="two">我替換two</div>
   <span slot="two">我替換two</span>
   <div slot="one">我替換one</div>
   <div>替換無(wú)名的slot</div>
   <div>替換無(wú)名的slot</div>
   <div>替換無(wú)名的slot</div>
  </custom>
 </div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
 Vue.component('custom',{
  template:`
   <div>
    <slot name="one"> 
     <p>我是one</p>
    </slot>
    <slot name="two">
     <p>我是two</p>
    </slot>
    <slot name="three">
     <p>我是three</p>
    </slot>
    <slot>
     <p>我是無(wú)名的slot</p>
    </slot>
   </div>
  `
 })
 new Vue({
  el:"#app"
 })
</script>

<div id="app">
  <h2>自定義組件</h2>
  <custom>
   <!-- 渲染的數(shù)據(jù)，是父組件中的數(shù)據(jù)，如果想使用子組件中的數(shù)據(jù)，就在子組件中建立自己的數(shù)據(jù) -->
   {{message}}
  </custom>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
 Vue.component('custom',{
  data(){
   return {
    message:"我是子組件的數(shù)據(jù)"
   }
  },
  template:`
   <div>
    <p>我是{{message}}</p>
    <slot>
    // 這的內(nèi)容會(huì)被父組件中內(nèi)容替換
     <p> {{message}}</p>
    </slot>
   </div>
  `
 })
 new Vue({
  el:"#app",
  data:{
   message:"我是父組件的數(shù)據(jù)"
  }
 })
</script>

  props:{
  propA:Number, 數(shù)值類型
  propB:[String,Number], 多種類型
  propC:{type:String,required:true}, 必填項(xiàng)
  propD:{type:Number,default:100}, 默認(rèn)是
  propE:{typr:Number,default:function(){return 1000}}
  propF:{validator:function(value){return value>2}} 符合value>2的值
  }

 Vue.component('custom-cmpontent',{
  data(){
   return {
    incrementCount:this.count //作為局部組件的data的初始值
   }
  },
  props:{
   count:{
    type:Number, // 類型
    default:10, // 默認(rèn)值
    required:true //必須要傳參數(shù)
   }
  },
  computed:{
   incrementCount2(){
    return this.incrementCount
   }
  },
  template:`
    <div>
     <h2>我是一個(gè)自定義組件</h2>
     <input type='button' value="改變count的值" @click="changeCount">
     {{incrementCount}}
    </div>
  `,
  methods:{
   changeCount:function(value){
    this.incrementCount++;
    this.$emit('receive')
   }
  }
 })
 new Vue({
  el:"#app",
  data:{
   count:0
  },
  methods:{
   countH:function(){
    this.count++;
   }
  }
 })