vue元件系列6、雙向繫結方法
阿新 • • 發佈：2019-03-27
雙向繫結，湊合能用的方法，
父
<template> <div> <div>父傳子 測試</div> <!-- 貌似可以設定很多方法 --> <children @input="changevalue" @outchang="fun_t1" :db_value1="f_data1" :db_value2="f_data2" ></children> <button draggable="true">可以移動的按鈕</button> <p>==================下面是雙向繫結測試 ========================</p> <input type="text" v-model="f_data1" /> <input type="text" v-model="f_data2" /> </div> </template> <script > export default { components:{ 'children':()=>import("./personmode/children.vue"), }, data() { return { tm:'', parentMsg:'test', f_data1:'', f_data2:'', }; }, methods: { changevalue:function(parm1,parm2){ console.log('引數1='+this.f_data1); console.log('引數2='+this.f_data2); this.f_data1=parm1; this.f_data2=parm2; }, fun_t1:function(parm){ console.log('這裡執行方法 '+parm); } } }; </script>
子元件
<template>
<div>
<h4>我要實現雙向繫結</h4>
<input type="text" v-model="my_db_value1" />
<p>{{ my_db_value1 }}</p>
<input type="text" v-model="my_db_value2" />
<p>{{ my_db_value2 }}</p>
<button @click="mytest">再調方法</button>
</div>
</template>
<script>
export default {
name:'my_test_child',
data() {
return {
my_msg:'',
my_data:'',
my_db_value1:'',
my_db_value2:''
};
},
props:{
msg:{
type: String,
default: '未初始化',
},
db_value1:{
type:String,
default:'',
},
db_value2:{
type:String,
default:'',
}
},
watch:{
db_value1(val){
this.my_db_value1=val;
},
db_value2(val){
this.my_db_value2=val;
},
my_db_value1(val){
this.$emit('input',val,this.my_db_value2);
},
my_db_value2(val){
this.$emit('input',this.my_db_value1,val);
}
},
methods: {
mytest:function(){
this.$emit('outchang','呼叫方法');
}
}
};
</script>