Vue的父子组件数据传递
发布时间：2020-12-14 04:30:36 所属栏目：大数据 来源：网络整理
导读：由父组件向子组件传递数据： 比如app向Vfooter组件传递数据：得现在父组件的APP中给子组件显示部分绑定自定义属性 数据可以是列表 数字 对象…… songList是父组件里定义过的列表数据 data(){ return { msg: ‘ vue ‘ , songList:[ {song: " 星月神话 " ,au
|
由父组件向子组件传递数据： 比如app向Vfooter组件传递数据：得现在父组件的APP中给子组件显示部分绑定自定义属性 数据可以是列表 数字 对象…… songList是父组件里定义过的列表数据 data(){ return{ msg:‘vue‘,songList:[ {song:"星月神话",author:"金莎"},{song:"红颜旧",author:"刘涛"},{song:"九张机",author:"叶清炫"} ], imgIndex:0,} },
<Vfooter v-bind:song="songList"></Vfooter> 此时去子类组件Vfooter组件中检查数据类型，需要应用props方法 props:{
song:Array
},
当验证通过，数据类型与期望类型一致后，可以通过v-for去对数据操作…… <footer class="footer">
<h3>我是页尾 关于我们</h3>
<ul>
<li v-for="item in song"> {{item.author}} </li>
</ul>
</footer>
********************************************************************************************* 子组件向父组件传递数据： 例如?Vcontent给APP里面传： 先在子组件绑定一个响应事件 <template>
<div class="content">
<h2>中心区域</h2>
<button @click="addSong">添加歌手</button>
</div>
</template>
这次点击会触发当前组件下的addSong方法，而在此方法里需要让其找到对应的自定义父组件响应 此时用到this.$emit(父组件待响应事件，待传递数据)? methods:{ addSong(){ this.$emit("addAuth",{song:"天下",author:"张杰"}); } },
父组件此时的addAuth方法会执行对应的方法 对应的方法接收数据参数可以省略，但到下面执行方法时必须有形参 <Vcontent v-on:addAuth="addStar"></Vcontent>
方法执行，接收数据，并执行相应操作 methods:{ addStar(s){ //alert(s); this.songList.push(s) },} }
S为实际接收到的数据，此处不可直接写str表示，会异常 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |