父组件与子组件传递参数

组件的作用是提高代码的复用性,提高效率,在vue中使用组件可以通过如下的方法来传递参数
<btn2 :a="Index" v-on:receive="changeValueHandle"></btn2>
:a="Index"绑定父组件的Index到a中,然后子组件如下,通过props来接收a的参数
Vue.component("btn2",{
props: ['a'],
template: '<button class="btn submit_btn" @click="submitShow(a)">' +
'<slot>按钮</slot>'+
'</button>',
methods:{
submitShow: function (a) {
alert(a);
this.$emit("receive");
}
}
});
在子组件中定义点击事件,然后在子组件进行这个操作的时候来把这个操作传给父组件,
父组件通过 v-on:receive="changeValueHandle" 这样的写法来执行后续操作
var vm=new Vue({
el:".app",
data:{
Index:0,
phoneVal:"123456"
}
methods:{
changeValueHandle:function () {
$.ajax({
type:'post',
url:"../json/js1.json",
data:{
phone:this.phoneVal
},
dataType:"json",
success:function(data){
alert(1);
console.log(data);
},
error:function(error){
console.log(error);
}
})
}
}
});


posted @ 2017-11-22 17:51  乐得逍遥  阅读(230)  评论(0编辑  收藏  举报