父子组件之间的访问

最新推荐文章于 2022-09-02 01:30:47 发布
最新推荐文章于 2022-09-02 01:30:47 发布
阅读量234 收藏
点赞数
分类专栏： 前端框架 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46258465/article/details/119898803
版权

父子组件之间的访问

父访问子

父组件访问子组件有两种方法

$children

注意需要用下标表明是第几个子组件，例如访问第一个子组件就是$children[0],也是由于使用下标，使之每次使用不利于代码管理维护，耦合所以使用并不广泛。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>childen访问方式</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
  <h2>這個地方是组件</h2>
  <button @click="btnclick"></button>
</div>
<template id="cpn">
  <div>
    <h1>hhhhhh</h1>
  </div>

</template>
<script src="../vue.js"></script>
<script>
  const app =new Vue({
    el:"#app",
    data:{
      message:'这个是根组件'

    },
    methods:{
      btnclick(){
        console.log(this.$children[0].name)
        console.log(this.$children)

      }

    },
    components:{
      cpn:{
        template:`#cpn`,
        data(){
          return{
          name:'這個是cpn组件'

        }

        },


      }

    }

  })
</script>

</body>
</html>

$ref

给个 ref=``标记然后使用的时候.$refs.标记名

$ref对象类型默认为空直接添加ref即可访问

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>childen访问方式</title>
</head>
<body>
<div id="app">
  <cpn ref="aa"></cpn>
  <h2>這個地方是组件</h2>
  <button @click="btnclick"></button>
</div>
<template id="cpn">
  <div>
    <h1>hhhhhh</h1>
  </div>

</template>
<script src="../vue.js"></script>
<script>
  const app =new Vue({
    el:"#app",
    data:{
      message:'这个是根组件'

    },
    methods:{
      btnclick(){
        console.log(this.$refs.aa.name)
        console.log(this.$refs.aa)

      }

    },
    components:{
      cpn:{
        template:`#cpn`,
        data(){
          return{
            name:'這個是cpn组件'

          }

        },


      }

    }

  })
</script>

</body>
</html>

子访问父

父组件访问子组件有两种方法，其中$root是访问根组件，一般是Vue实例对象。

$parent

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>children访问方式</title>
</head>
<body>

<div id="app">
  <cpn>

  </cpn>
  <h2>這個地方是组件</h2>

</div>

<template id="ccpn">
  <div>
    <h1>ccpn</h1>
    <button @click="btn2click"></button>
  </div>


</template>
<template id="cpn">
  <div>
    <h1>hhhhhhcpn</h1>
    <ccpn></ccpn>

  </div>

</template>
<script src="../vue.js"></script>
<script>
  const app =new Vue({
    el:"#app",
    data:{
      message:'这个是根组件'

    },

    components:{
      cpn:{
        template:`#cpn`,
        data(){
          return{
            name:'11111111111'

          }

        },

        components:{
          ccpn:{
            template:`#ccpn`,
            //访问根组件
            methods:{
              btn2click(){
         console.log(this.$parent.name)
         console.log(this.$parent)

              }

            }
          
          }

        }


      }

    },


  })
</script>

</body>
</html>

访问父组件证实

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NfwVgYWO-1629810608238)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20210824210803660.png)]

$root

访问根组件Vue

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>children访问方式</title>
</head>
<body>

<div id="app">
  <cpn>

  </cpn>
  <h2>這個地方是组件</h2>

</div>

<template id="ccpn">
  <div>
    <h1>ccpn</h1>
    <button @click="btn2click"></button>
  </div>


</template>
<template id="cpn">
  <div>
    <h1>hhhhhhcpn</h1>
    <ccpn></ccpn>

  </div>

</template>
<script src="../vue.js"></script>
<script>
  const app =new Vue({
    el:"#app",
    data:{
      message:'这个是根组件'

    },

    components:{
      cpn:{
        template:`#cpn`,
        data(){
          return{
            name:'11111111111'

          }

        },

        components:{
          ccpn:{
            template:`#ccpn`,
            //访问根组件
            methods:{
              btn2click(){
                console.log(this.$root.message)
                console.log(this.$root)

              }

            }
          }

        }


      }

    },


  })
</script>

</body>
</html>

证实：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iFhQbUK8-1629810608241)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20210824210653369.png)]

       methods:{
          btn2click(){
            console.log(this.$root.message)
            console.log(this.$root)

          }

        }
      }

    }


  }

},

})

```

证实：

[外链图片转存中...(img-iFhQbUK8-1629810608241)]

a Fang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 父组件中调用子组件的方法
qq_29236119的博客
02-02 2816
Vue项目中如何在父组件中直接调用子组件的方法： 方案一：通过ref直接调用子组件的方法； //父组件中 <template> <div> <Button @click="handleClick">点击调用子组件方法</Button> <Child ref="child"/> </div> </template> <script> import Chil
如何在Vue的父子组件之间传递数据和调用方法
01-08
然鹅 在默认情况下 子组件中是无法访问到父组件中的data数据和methods中的方法的 父组件可在在引用的时候通过属性绑定(v-bind)的方式将将需要传递给子组件的数据传递给子组件 然后 在子组件中通过props属性进行定义...
vue（子组件访问父组件，$root,$parent）
lbs311709000127的博客
12-03 564
$root:访问根组件 $parent：访问父组件 运行结果 实例代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> </st...
Vue基础：父子组件访问的方式
qq_51066068的博客
08-30 946
有时候我们需要父组件直接访问子组件（通过$children或$refs），子组件直接访问父组件（$parent）。
父组件如何调用子组件中的方法？
ni15534789894的博客
09-27 1万+
父组件代码，假如父组件要关闭弹窗时候，需要做一系列操作，例如关闭弹窗时需要将子组件中的内容恢复成原来的样子，那么该如何调用呢？ 1、首先应该在子组件上面加一个ref，例如：ref=“child”， <el-dialog title="【细菌列表】" :visible.sync="bacteriaDialog" element-loading-text="正在加载" @closed="closedDialog" &g
从父组件中获取子组件的值
苍山负雪_Stacking
09-27 8976
provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。
Angular 2父子组件数据传递之局部变量获取子组件其他成员
08-30
主要给大家介绍了关于Angular 2父子组件之间数据传递之局部变量获取子组件其他成员的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
【JavaScript源代码】详解vue组件之间相互传值的方式.docx
12-30
通过 $parent / $children 或 $refs 访问组件实例三、兄弟组件之间传值1. 还是通过 $emit 和 props 结合的方式2.通过一个空 vue 实例四、多层父子组件通信总结　概述　一、父组件向子组件传值　二、子组件向父组件...
Vue组件通信的四种方式汇总
11-27
众所周知vue是一种mvvm框架，它相对于jquery可能比较大的差异点之一就在于组件之间的通信了。本文重点是梳理了前两个,父子组件通信和eventBus通信,我觉得Vue文档里的说明还是有一些简易,我自己第一遍是没看明白。 ...
Vue组件通信的几种实现方法
12-01
一般常见的组件之间的通信有以下几种情况，A和B，B和C，B和D之间都是父子关系，C和D之间是兄弟组件关系。 常用的通信手段有两种： 1.ref：给元素或组件注册引用信息 2.children:访问父级组件和子组件的实例。 这...
28.父访问子【＄children、＄refs】
勇敢牛牛
08-18 156
有时候需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问根组件： 1.父组件访问子组件：使用 $children 或者 $refs (reference:引用)； 2.子组件访问父组件：使用 $parent 使用 $children 访问子组件 1.this.$children是一个数组类型，它包括所有子组件对象； 2.我们这里通过一个遍历，取出所有子组件的message状态； <!DOCTYPE ...
vue父组件中调用子组件的方法
Dreamlandz的博客
07-26 1944
（1）通过ref直接调用子组件的方法 //父组件中 <template> <div> <Button @click="handleClick">点击调用子组件方法</Button> <Child ref="child"/> </div> </template> <script> import Child from './child'; export
父子组件的访问方式
weixin_45768166的博客
09-02 339
Vue父子组件访问方式
父组件调用子组件的方法
zm_miner的博客
11-28 1万+
接着上一篇 搜索组件 - 父组件向子组件传值(子组件调用父组件方法) 上一篇最后问到, 如果我想通过父组件中的事件来触发子组件中的方法应该怎么做呢 首先, 第一步 子组件中写一个方法 比如说例子中的获取子组件input中的值 子组件js getInputData = () =&gt; { this.nameValue = this.state.nameValue; this.i...
vue父组件调用子组件的方法
曲小强
04-27 1万+
父组件：在组件中写一个ref="", @click.native="click" // 点击事件 <template> <div class="container"> <child @click.native="click" ref="child"></child> </div> </template&g...
vue关于父组件调用子组件的方法
热门推荐
chern1992的博客
07-03 4万+
refs
Vue父组件如何调用子组件的方法
Joy_Yue的博客
11-30 1万+
对文章Vue.js 父子组件通信的十种方式做一个补充：在父子组件通信中，父组件如何调用定义在子组件的方法 1、父组件文件，使用子组件时，声明ref属性： &lt;v-header ref="header"&gt;&lt;/v-header&gt; 2、父组件函数中，用this.$refs调子组件的数据或方法：如： this.$refs.header.属性名 this.$refs.hea...
Vue:父组件调用子组件内函数的方法
Queen-Shir的博客
06-29 1万+
参考网址：https://blog.csdn.net/a5534789/article/details/53415201 Demo： 1、新建一个空的vue对象，命名为eventHub; 2、在父页面 hsi.vue 使用 this.root.eventHub.root.eventHub.root.eventHub.emit(‘function1’,’parame’); 随...
vue父子组件之间传值
最新发布
07-27
除了props和$emit，还有其他方法可以实现父子组件之间的传值，如使用$parent和$children来访问父组件和子组件的实例，或者使用$ref来引用子组件。但是在实际开发中，props和$emit是最常用的方法。 #### 引用[....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值