使用ref方式实现组件通讯

最新推荐文章于 2023-06-23 22:29:18 发布

公子清

最新推荐文章于 2023-06-23 22:29:18 发布

阅读量581

点赞数 1

分类专栏： js系列实践真题系列 Vue系列文章标签： refs传参组组件通讯 vue

本文链接：https://blog.csdn.net/Josiah_Yuan/article/details/106853759

版权

ref方式实现组件通讯

基于refs子组件传值子组件
$parent和$children

显示和隐藏只需4步：
1.在子组件voteButton中data(){
    return {
        falg = true;
    }
}
2.在子组件voteButton里面给div加上v-show="flag"
3.在父组件中加上<button @click="handle"></button>按钮标签加上handle方法
4.在父组件中methods:{
    handle(){
        this.$childern[0].flag = !this.children[0].flag         
    }
}


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .container {
    
            box-sizing: border-box;
            margin: 20px auto;
            padding: 10px;
            border: 1px solid #AAA;
            width: 300px

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

公子清

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
使用ref方式实现组件通讯

refs方式实现组件通讯基于ref子组件传值子组件$parent和$children显示和隐藏只需4步：1.在子组件voteButton中data(){ return { falg = true; }}2.在子组件voteButton里面给div加上v-show="flag"3.在父组件中加上<button @click="handle"></button>按钮标签加上handle方法4.在父组件中methods:{ handl
复制链接

扫一扫