vue中各組件之間傳遞數(shù)據(jù)的方法示例

<div id="app">
<my-item :value="value">//傳入數(shù)據(jù)，注意引號里面的為父組件的數(shù)據(jù)，
</my-item>
</div>  
Vue.component("my-item",{
 template:"<div>這是組件,{{value}}</div>",
 props:["value"],//聲明需要的數(shù)據(jù)，HTML 特性是不區(qū)分大小寫的,所以此處如果為駝峰命名法，如：myMessage，則在模板中需要轉(zhuǎn)化為用斷線隔開的形式：my-Message
 data:function(){
  return {

  }
 },
 methods:{
  
 }
});

//創(chuàng)建vue實例
const vm=new Vue({
 el:"#app",
 data:{
  value:"這是父組件的數(shù)據(jù)",
 },
 methods:{
 
 },
});

<div id="app">
{{number}}
<!-- 在用到子組件的地方監(jiān)聽，監(jiān)聽當(dāng)前實例上的自定義事件 ,接受參數(shù)，并執(zhí)行回調(diào)-->
<my-item v-on:cli="totlcli">
</my-item>
</div>

Vue.component("my-item",{
template:"<button v-on:click='add'>{{count}}</button>",
data:function(){
 return {
  count : 0,
 }
},
methods:{
 add:function(){
  this.count+=1;
  this.$emit("cli",this.count);//觸發(fā)當(dāng)前實例上的事件。多個參數(shù)可以數(shù)組的形式傳遞
 }
}
});

//創(chuàng)建vue實例
const vm=new Vue({
el:"#app",
data:{
 number:""
},
methods:{
 totlcli:function(num){//這個回調(diào)在父組件監(jiān)聽到事件時，執(zhí)行的，其參數(shù)為觸發(fā)事件時傳遞的。
  return this.number=num;
 },
},
});

<div id="app">
 <my-item>
  <p slot="header">這是頭部</p>
  <p>這是多余的內(nèi)容，</p>
  <p slot="footer">這是尾部</p>
 </my-item>
</div>

Vue.component("my-item",{
  template:"<div>"+
    "<header><slot name='header'></slot></header>"+
    "<main><slot>備用插槽，當(dāng)沒有備用內(nèi)容會顯示出來</slot></main>"+
    "<footer><slot name='footer'></slot></footer>"+
    "<div>",
  props:{
  },
  data:function(){
   return {   
   }
  }
 });
 const vm=new Vue({
  el:"#app",
  data:{
  },
  methods:{ 
  },
 });