js_脚本之家,vue父子组件的数据传递示例_vue

先定义一个子组件,在组件中注册props

1.父组件向子组件传递数据

  {{message}} export default { props: { message: String //定义传值的类型<br> }} 
 模板aaa=>{{msg1}} //msg1写在这里是可以的,因为这是父组件内部 //{{msg1}} //这种写法是不可以的,这是在子组件内部,要在这里显示父组件的数 //据,需要用props定义属性 

var vm=new Vue { a:'aaa' }, components:{ 'aaa':{ data () { msg1:'父组件的数据' }, template:'#aaa', components:{ 'bbb':{ // props:['m'], //这是一种写法,props以数组的形式定义属性 props:{ 'm':String //这是第二种写法,对象的形式 }, template:'这是子组件bbb--{{m}}' } } }, }})

在父组件中,引入子组件,并传入子组件内需要的值

从这个例子中可以看出,父组件向子组件传递数据,因为每一个组件都是独立的作用域,所以要把父组件的数据在子组件中显示,要使用props定义属性来绑定父组件里面的数据才可以,如这里父组件的数据是msg1,用props定义一个属性m,来接收数据msg1;在子组件的模板里面用{{m}}的形式显示父组件的数据

  父组件    import child from './child' //引入child组件export default { data() { return { parentMsg: 'a message from parent' //在data中定义需要传入的值 } }, components: { child }} 

父组件不仅可以向子组件传递数据,也可以传递方法,如:

这种方式只能由父向子传递,子组件不能更新父组件内的data

这是一个子组件,引用在父组件中,其中的 :get-datas=”getCreateIssues”
接收的是一个方法,这个方法在父组件中从后台获取数据传递给子组件,在子组件中就可以展示这些数据,

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

methods:{ getCreateIssues(){ //这是es6的格式 this.$http.get.then //这也是es6的格式 }}

复制代码
代码如下:props:[‘executorsData’,’isShow’,’modelType’,’issueDatas’,’user’,’projects’,’title’,’getDatas’,’getEditData’,’localtoken’,”userName”,”tokenData”],

getDatas就是从父组件中接收数据的方法,对应上面的
:get-datas=”getCreateIssues”,在子组件可以直接使用getDatas这个方法,如:

methods:{ okConfirm(){ issueApi.delIssue.then(res=>{ if{ this.successPop; this.openConfirm=false; this.isShow=false; //这里就是使用的父组件的方法 this.getDatas(); //end this.$dispatch; }else{ this.warningPop } }) },}

2.子组件向父组件传递数据

在子组件中选择条件后,在父组件中执行搜索功能

 清空 搜索 //modalData是需要向后台发送的数据

export default{ props:['confirm'], data(){ return { modalData:{ProjVerName:''} } }}

定义一个confirm方法接收父组件中的方法,这里从子组件向父组件传递数据不是按照教程上的方法使用$emit,而是直接把数据作为参数传递到方法中,在父组件中这样使用:

data(){ return { searchData:{ ProjVerName:'', } }},methods:{ search{ //data就是接收子组件传递过来的数据的形参 this.searchData.ProjVerName=data.ProjVerName; this.$http.get(url,this.searchData.ProjVerName).then(res=>{ console.log }}

这种方法就是从子组件向父组件传递数据,

从子组件向父组件传递方法,需要使用$dispatch,如:

在子组件中点击保存以后,这个弹出框消失,父组件中需要获取一遍最新数据,这种情况就需要把这个保存事件发送出去,让父组件知道,用法:

复制代码 代码如下:

保存

methods:{ save (){ this.$http.post.then(res=>{ console.log; this.$route.router.go({ name:'issues.issueList' }); //保存完以后跳转到对应的路由 this.$dispatch //这里把保存事件发送出去 }) }}

在父组件中使用events来接收这个事件,并执行一些动作,如:

events:{ disSave(){ //这就是接收的子组件的方法 this.getCreateIssues(); //接收完以后调用一个方法获取一遍数据,这样就实现了在子组件中点击保存后,父组件能直接获取到最新的数据 }},

关于子组件向父组件传递数据也可以使用教程里的方法,使用$emit

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

发表评论

电子邮件地址不会被公开。 必填项已用*标注