Vue实战项目 父子组件互相传参的语法详解

Vue实战项目 父子组件互相传参的语法详解

父传子组件

 <!-- 数据显示区 -->
<router-view :daohangtiao="daohangtiao" :datanet="datanet" :datamysql="datamysql" :datawangzhan="datawangzhan" :datawork="datawork" :datagongju="datagongju"></router-view>

    const Net = {
    
    
      template: '#Net',
      props: ['datanet']
    }

父传子就是在数据显示的那个方法中写上 ：变量名 传参 等于号后面的值相当于是一个ID 用来在你创建的子组件中接收的 子组件就是直接调用props后面中括号跟上ID就好了 如果数据还是获取不到的话检查一些data是否有return函数 如果data没有问题访问变量的时候加this试试

子传父组件

这是子组件代码
// 利用这个方法子组件传值给父组件进行数据处理
this.$emit('getdata',this.tempdata)
// 传完之后调用父组件的查询分类资料的方法
this.$parent.SearchData();

这是父组件代码
<!-- 这里写页面的主要数据 -->
<router-view :msg="msg" :msgs="msgs" :msgss="msgss" @getdata="receivedata" @getuser="receiveuser" @getnavi="receivenavi"></router-view>
// 接收资料内容组件的分类搜索数值
receivedata(data){
    
    
	this.temporaryData=data
},

1.子传父组件就是在子组件的代码里用$emit函数
2. $emit函数调getdata函数 这个getdata函数要写的父组件的router-view里面绑定 然后这个getdata函数会自动调取父组件里的receivedata函数
3. 然后子组件里第二个参数就是值 然后在父组件中把值赋给父组件的data里进行操作

这是父与子的相互调用 子与子暂时不更新 用的不多 应该是我经验不够吧 以上经验有不足之处互喷

以上代码还有没搞通的QQ2773938492 1v1教学 免费

推广一下学习资料库 www.aolanghs.com 下面都是我对软件+网站的项目经验看法 主页还有开发常用的框架资源链接以下是网站的图片多多支持