父子组件传值。模糊查询。

父组件：

<template>
    <div class="container" >
        <div class="box-title">
           <span style="font-size:22px;color:#ffffff;margin-top:2px;margin-left:15px;font-weight:400">旅游景点</span>
             <img src="@/assets/images/beerCity/icon_close.png" class="closeTable" @click="closeTab"/>
        </div>
        <div>
            <el-input placeholder="请输入内容" class="input-style" v-model="inputName">
                <el-button slot="append" icon="el-icon-search" class="btn" @click="btnName"></el-button>
            </el-input>
        </div>
        <div style="margin-left:80px">
             <div class="change-tab" v-for="(item,index) in touristList" :key="index" :class="{'choseStyle':choseId==index}" @click="choseName(index)">
           <span :class="[index!=0?'borderLeft':'']">{{item.name}}</span>
        </div>
        </div>
       
        <div class="tab-style">
             <el-table :header-cell-style="{background:'#1f4876',color:'#1ffefd',fontSize:'16px',fontWeight:'normal',border:'1px solid transparent'}"
                       :cell-style="{ color: 'rgba(255,255,255,.8)',fontSize:'16px',height:'30px',border:'1px solid #1f557c' }"
                       :data="IslandTable"
                       style="width: 90%;margin:1px 15px 15px 15px;background-color:transparent;border:1px solid #1f557c"
                       border>
            <el-table-column
                prop="entryName"
                label="景点名称"
                width="120"
               >
            </el-table-column>
            <el-table-column
                prop="entryLevel"
                label="级别"
                width="75">
            </el-table-column>
           <el-table-column label="详情" width="75">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="text"
                    style="color:#1ffefd;font-size:16px;margin-left:5px"
                    @click="handleEdit(scope.$index, scope.row)">查看</el-button>
                </template>
                </el-table-column>
        </el-table>
        </div>
        <attractionsdetail :openDialog.sync="openDialog" 
                           :currentList="currentList"    />  
    </div>
</template>
<script>
import { selScenicSpotDetailedInfo} from '@/api/lingshanIsland'

const attractionsdetail = () => import('@/views/lingshanisland/components/left/AttractionsDetail')
export default {
    
    components:{
        attractionsdetail
    },
    data(){
        return{
            inputName:'',
            openDialog:false,
            choseId:0,
            currentList:{},
            touristList:[{name:"风清灵山岛"},{name:"生态灵山岛"},{name:"研学灵山岛"}],
            IslandTable:this.fqIsland,
        //     fqIsland: [{
        //     entryName: '八大关',
        //     entryLevel:'AAAA',
        //   }, {
        //     entryName: '八大关',
        //     entryLevel:'AAA',
        //   }, {
        //      entryName: '八大关',
        //     entryLevel:'AA',
        //   }, {
        //     entryName: '八大关',
        //     entryLevel:'A',
        //   }],
        //   stIsland: [{          
        //     entryName: '中山公园',
        //     entryLevel:'AAAA',
        //   }, {
        //     entryName: '中山公园',
        //     entryLevel:'AAAA',
        //   }, {
        //      entryName: '中山公园',
        //     entryLevel:'AAAA',
        //   }, {
        //     entryName: '中山公园',
        //     entryLevel:'AAAA',
        //   }],
        //   yxIsland: [{          
        //     entryName: '金沙滩',
        //     entryLevel:'AAAA',
        //   }, {
        //     entryName: '金沙滩',
        //     entryLevel:'AAAA',
        //   }, {
        //      entryName: '金沙滩',
        //     entryLevel:'AAAA',
        //   }, {
        //     entryName: '金沙滩',
        //     entryLevel:'AAAA',
        //   }],
        }
    },
    created() {
        this.choseName(0)
    },
   
       
    methods:{
        selScenicSpotDetailedInfo(){
            let param={
                entryTheme:this.choseId+1
                
            }
            selScenicSpotDetailedInfo(param).then(res=>{             
                if(res.data.resultCode ==='0'){
                    this.IslandTable=res.data.data
                }
            })
        },
        btnName(){
             let param={
                entryTheme:'',
                entryName:this.inputName
            }
            selScenicSpotDetailedInfo(param).then(res=>{             
                if(res.data.resultCode ==='0'){
                    this.IslandTable=res.data.data
                    this.choseId=5
                }
            })
        },
        choseName(index){
            this.choseId=index
            if(index===0){
                this.IslandTable=this.fqIsland
            }else if(index===1){
                this.IslandTable=this.stIsland
            }else{
                this.IslandTable=this.yxIsland
            }
            this.selScenicSpotDetailedInfo()

        },
        closeTab(){
            this.$emit('close')
        },
        handleEdit(index,row){
            
            this.openDialog=true
            this.currentList = row
        },
    }
}
</script>
<style scoped lang="less">
.container{
    width:336px;   
    background-color: rgba(8,33,57,.89);
    border:1px solid rgba(50,277,235,.9);
    position: fixed;
    left:698px;
    top:170px;
    pointer-events: auto;
}
.box-title{
    display: flex;
    height:40px;
    background-color: #1f4876;
    justify-content: space-between;
    margin:2px auto;
    .closeTable{
        width:16px;
        height:16px;
        margin-right: 15px;
        margin-top: 13px;
    }
}
.change-tab{
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
   color:#1ffefd;
    font-size:14px;
    
    display: inline;
}
.borderLeft{
    border-left:1px solid #1f557c;
    padding-left: 3px;
    margin-left: 3px;
}
.choseStyle{
    color:aliceblue
}
.input-style{
    width:200px;
    margin:5px 5px;
}
.tab-style{
    max-height:400px;
    overflow: scroll;
}
::-webkit-scrollbar-thumb {  /*滚动条里面小方块*/
   border-radius: 10px;
   height:70px;
   background-color: #27649d; /*设置滚动条颜色*/
}
/deep/.el-input__inner{
    background-color: transparent;
    border:1px solid #1f4876
}
 .el-input-group__append button.el-button {
    background-color: transparent;
    width:50px;
  }
  /deep/.el-input-group__append{
      background-color: transparent;
      border:1px solid #1f4876;
  }
/deep/.el-table tr{
    background-color: transparent;
    border:1px solid #1f557c;
}
/deep/.el-table--border::after, .el-table--group::after, .el-table::before {
    content: '';
    position: absolute;
    background-color: transparent;
    z-index: 1;
}
/deep/.el-table th.el-table__cell>.cell {
    margin-left: 5px;
}
/deep/ .el-table  tr:hover>td { background-color: transparent }
/deep/.el-table .el-table__cell {
    padding: 2px 0;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #193454 !important;
}
</style>

子组件：

<template>
    <div class="container-size" v-if="openDialog">
        <div class="box-title">
            <p>
                <span style="color:#ffffff;font-size:16px;margin-right:10px">{{currentList.entryName}}</span>
                <span style="color:#79fffe;font-size:16px">{{currentList.entryLevel}}</span>
            </p>
            
            <img src="@/assets/images/beerCity/icon_close.png" class="closeTable" @click="closeTab" />
        </div>
        <div>
            <img :src="currentList.islandProtectionHumanity.entryImg"  style="width:380px;height:216px;margin-top:5px;margin-left:8px">
        </div>
         <div class="personnel-profile">
            <div class="text-style">
                <p style="font-size:15px;line-height:22px;color:rgba(133,254,255,.8);text-indent:2em">
                    {{currentList.islandProtectionHumanity.entryIntroduction}}  
                    </p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        openDialog:{
            type:Boolean,
            default:false,
        },
        currentList:{
            type:Object,
            default:()=>{
            }
        }
    },
    data(){
        return{
        }
    },
    methods:{
        closeTab(){
            this.$emit('update:openDialog',false)
        }
    }
}
</script>
<style scoped lang="less">
.container-size{
    width:400px;
    height:432px;
    background-color: rgba(8,33,57,.9);
    border:1px solid rgba(50,277,235,.9);
    position: fixed;
    left:1050px;
    top:170px;
    pointer-events: auto;
}
.box-title{
    display: flex;
    justify-content: space-between;
    margin:10px 10px;
    .title-btn:hover{
            background-color:#215c95;
        }
    .el-icon-arrow-left{
        margin-left: 0px;
    }
    .closeTable{
        width:16px;
        height:16px;
        margin-right: 10px;
        margin-top: 5px;
    }
}
.personnel-profile{
    height:150px;
    display: flex;
    flex-direction: column;
    margin-right: 2px;
    // margin:20px 20px 0px 20px;
}
.text-style{
   overflow: scroll;
   padding:30px 5px 30px 15px;
}
::-webkit-scrollbar-thumb {  /*滚动条里面小方块*/
   border-radius: 10px;
   height:70px;
   background-color: #27649d; /*设置滚动条颜色*/
}


</style>