<template> <div> <h3>图书管理</h3><hr> <div> <div v-for="b in books" :key="b.id"> <book-detail @abc="xyz" :Book="b" :MSG="abc"></book-detail> </div> </div> </div> </template> <script> import BookDetail from './components/BookDetails.vue' export default{ components:{BookDetail}, data(){ return { abc:'heheda', books:[{ id:1, name:'7天 JAVA 从入门到放弃', text:'到底是人性的扭曲，还是道德的沦丧. 青年男子为何突然脱发，中年男人为何删库跑路。', price:20, img:'img2.jpg', showHehe:true },{ id:2, name:'7天 C# 从入门到自杀', text:'到底是人性的扭曲啊，还是道德的沦丧啊. 祖国的花朵为何自杀。', price:20, img:'../../static/img2.jpg', showHehe:false }] } }, methods:{ xyz(bid){ alert(bid); } } } </script>
在子页面中可以这么搞
<script> export default{ props:["Book","MSG"], created(){ console.log(this.Book.name); }, methods:{ select(id){ this.$emit('abc',id); }, detail(bid){ this.$router.push(`/admin/Details/${bid}`); } } } </script>
而其中的$emit是可以调用父页面的方法的。