父组件打开子组件、父子传值、for循环图片

m0_60827885

已于 2022-04-15 14:25:12 修改

阅读量252

点赞数

文章标签：前端

于 2022-04-14 15:54:12 首次发布

本文链接：https://blog.csdn.net/m0_60827885/article/details/124173985

版权

父组件引入子组件。组件懒加载，定义变量，传变量

子组件接收

2、父组件：

 <biology-detail  :openDialog.sync="openDialog" :currentMes="currentMes"/>
 data(){
        return{
            openDialog:false,
            currentMes:{},
 biologyList1:[
                {picture:require('@/assets/images/lingshanisland/biology1.webp'),name:'海洋生物1'},
                {picture:require('@/assets/images/lingshanisland/biology2.webp'),name:'海洋生物2'},
                {picture:require('@/assets/images/lingshanisland/biology3.webp'),name:'海洋生物3'},
                {picture:require('@/assets/images/lingshanisland/biology3.webp'),name:'海洋生物1'},
                {picture:require('@/assets/images/lingshanisland/biology2.webp'),name:'海洋生物2'},
                {picture:require('@/assets/images/lingshanisland/biology1.webp'),name:'海洋生物3'},
            ],
        }
 methods:{
        openDetail(item){     
            console.log('this.picture',item)      
            this.openDialog=true
            this.currentMes=item
        },
    }

子组件：