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里进行操作
这是父与子的相互调用 子与子暂时不更新 用的不多 应该是我经验不够吧 以上经验有不足之处互喷