Vue.js利用額外的vue instance處理組件事件及資料

by cactus77kiki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="vapp">
  【利用額外的vue instance處理組件事件及資料】
  (範例：組件1利用傳入之Function將值傳給父組件加工，而不由組件內處理)
  <h3>component1(將組件內事件丟回給父層處理。而父層轉手由額外的vue instance統一處理)</h3>
  <ele-one :selected = "selected1" :valuedeliver="set_comp_one"></ele-one>
  <h3>component2</h3>
  <ele-two :selected = "selected2" :type="selectedtype"></ele-two>
</div>

JavaScript

var comper = new Vue({
	data:{
  	selected_one: "",
    selected_two: "",
    selected_type:""
  },
  methods:{
  	setonevalue: function(param){	//param:objec
    	//改變ele-one 資料
    	this.selected_one = param.id;
      this.selected_type = param.kind;      
    },
    settwovalue: function(param){	//param:value
    	this.selected_two = param;
    }    
  }
});

Vue.component('ele-one',{
	props:{
  	selected:{type: Number},
    valuedeliver:{type: Function}
  },
  template:`<div><div v-for="(l,index) in list">
  						<label><input type="radio" :value="l.id" v-model="selection" @change="changer(l)">
              {{l.text}}</label>
  					</div></div>`,
  data:function(){
  	return{
    	selection: this.selected,
      list: []
    }
  },
  methods:{
  	getData: function(){    	
      var data = 
      [{id: 1, text:'前端', kind:'A'},{id: 2, text:'後端', kind:'B'},{id: 3, text:'資料庫', kind:'C'}];
      this.list = data;
    },
    changer: function(param){    	 	
    	this.valuedeliver(param);
    }
  },
  created:function(){
  	this.getData();
  }
});

Vue.component('ele-two',{
	props:{  
  	type:{type:String},
  	selected:{type:Number}
  },
  template:`<div>
  					<div v-for="(l,index) in list">
  						<label><input type="radio" :value="l.id" v-model="selection">
              {{l.text}}</label>
  					</div>
            </div>`,
  data: function(){
  	return {    	
    	typing: this.type,
    	selection: this.selected,
      datalist: [],
      //list: []
    }
  },
  watch:{
  	type: {
        handler: function (value) {
            this.typing = value;    //當父組件type值更新時、子組件主動更新typing
        },
        deep: true    //若props1為物件時使用深度監控
    },
  },
  computed:{  	
  	list: function(){    	
      var list = this.datalist;   
      var value = this.typing;
      var arry = list.filter(function(item){      		
      	return item.kind == value;          
      });     	
      return arry; 
    }
  },
  methods:{
  	allData: function(){    	
      var data = 
     ...