Vue组件-$refs

alice--小文子 2022-09-23 09:32:12 阅读数:712

vueCSDN组件refstechnology-development

1 父组件:(父组件获取子组件只需要在父组件上加ref即可。)

关键代码1:<Search @search="handleSearch" placeholder="搜索频道" ref="cc"/>

关键代码2:console.log(this.$refs.cc.searchVal)
        console.log(this.$refs.cc.toParent())

详细代码如下:

<template>
<div>
<div class="aside">
<div style="width:100%;height:30px;">
<Search @search="handleSearch" placeholder="搜索频道" ref="cc"/>
</div>
<TitleMenu :isActive="select" @active="select = true">
<template v-slot:title>
<!--给title具名插槽传递内容-->
发现频道
</template>
<template v-slot:icon>
>
</template>
</TitleMenu>
<ChannelList :activeId = "curActive" @active="curActive = $event" :columns="2"/>
</div>
</div>
</template>
<script>
import TitleMenu from "./TitleMenu";
import ChannelList from "./ChannelList";
import Search from "./search";
export default{
components:{
TitleMenu,
ChannelList,
Search
},
data(){
return{
select:false,
curActive:1,
}
},
methods:{
active(){
console.log(9999)
},
handleSearch(e){
console.log("搜索");
}
},
mounted(){
console.log(this.$refs.cc.searchVal)
console.log(this.$refs.cc.toParent())
}
}
</script>
<style scoped>
.aside{
width:100%;
height:100%;
overflow:auto;
}
</style>

)

版权声明:本文为[alice--小文子]所创,转载请带上原文链接,感谢。 https://blog.csdn.net/alice9999999/article/details/119487832