java中的接口是类吗
191
2023-06-04
vue父子组件的数据传递示例
vue父子组件的数据传递示例
1.父组件向子组件传递数据
//
//据，需要用props定义属性
var vm=new vue({
el:"#box",
data () {
a:'aaa'
},
components:{
'aaa':{
data () {
msg1:'父组件的数据'
},
templeHSbaFhlate:'#aaa',
components:{
'bbb':{
// props:['m'], //这是一种写法，props以数组的形式定义属性
props：{
'm':String //这是第二种写法，对象的形式
},
template:'
}
}
},
}
})
从这个例子中可以看出，父组件向子组件传递数据，因为每一个组件都是独立的作用域，所以要把父组件的数据在子组件中显示，要使用props定义属性来绑定父组件里面的数据才可以，如这里父组件的数据是msg1，用props定义一个属性m，来接收数据msg1；在子组件的模板里面用{{m}}的形式显示父组件的数据
父组件不仅可以向子组件传递数据，也可以传递方法，如：
这是一个子组件，引用在父组件中，其中的 :get-datas=”getCreateIssues” 接收的是一个方法，这个方法在父组件中从后台获取数据传递给子组件，在子组件中就可以展示这些数据，
methods:{
getCreateIssues(){ //这是es6的格式
this.$http.get(url,data).then(res=>{}) //这也是es6的格式
}
}
在子组件中
复制代码 代码如下:
props:['executorsData','isShow','modelType','issueDatas','user','projects','title','getDatas','getEditData','localtoken',"userName","tokenData"],
getDatas就是从父组件中接收数据的方法，对应上面的 :get-datas=”getCreateIssues”，在子组件可以直接使用getDatas这个方法，如：
methods:{
okConfirm(){
issueApi.delIssue(this.delId).then(res=>{
if(res.data.code==0){
this.successPop('删除成功');
this.openConfirm=false;
this.isShow=false;
//这里就是使用的父组件的方法
this.getDatas();
//end
this.$dispatch('fetchList');
}else{
this.warningPop(res.data.message)
}
})
},
}
2.子组件向父组件传递数据
在子组件中选择条件后，在父组件中执行搜索功能
清空
搜索
//modalData是需要向后台发送的数据
export default{
props:['confirm']，
data(){
return {
modalData：{ProjVerName:''}
}
}
}
定义一个confirm方法接收父组件中的方法，这里从子组件向父组件传递数据不是按照教程上的方法使用$emit,而是直接把数据作为参数传递到方法中，在父组件中这样使用：
data(){
return {
searchData:{
ProjVerName:'',
}
}
},
methods:{
search(data){ //data就是接收子组件传递过来的数据的形参
this.searchData.ProjVerName=data.ProjVerName；
this.$http.get(url,this.searchData.ProjVerName).then(res=>{
console.log(res)
})
}
}
这种方法就是从子组件向父组件传递数据，
从子组件向父组件传递方法，需要使用$dispatch,如：
在子组件中点击保存以后，这个弹出框消失，父组件中需要获取一遍最新数据，这种情况就需要把这个保存事件发送出去，让父组件知道，用法：
复制代码 代码如下:
methods:{
save (){
this.$http.post(url,data).then(res=>{
console.log('保存成功');
this.$route.router.go({
name:'issues.issueList'
}); //保存完以后跳转到对应的路由
this.$dispatch('disSave') //这里把保存事件发送出去
})
}
}
在父组件中使用events来接收这个事件，并执行一些动作，如：
events:{
disSave(){ //这就是接收的子组件的方法
this.getCreateIssues(); //接收完以后调用一个方法获取一遍数据，这样就实现了在子组件中点击保存后，父组件能直接获取到最新的数据
}
},
关于子组件向父组件传递数据也可以使用教程里的方法，使用$emit
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
暂时没有评论，来抢沙发吧~