Vue中父组件访问子组件的方式--$children与$refs

最新推荐文章于 2024-05-28 07:05:14 发布
最新推荐文章于 2024-05-28 07:05:14 发布
阅读量889 收藏 1
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qianlixiaomage/article/details/104175557
版权 
1.通过$children
不常用，因为通过数组下标才能拿到具体的子组件，有不确定性；

2.$refs


demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <cpn></cpn>
        <cpn></cpn>
        <cpn ref="myCpn"></cpn>
        <button @click="btnClick">按钮</button>
    </div>
    <template id="cpn">
        <div>
            <h2>我是子组件</h2>
        </div>
    </template>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{

            },
            methods: {
               btnClick(){
                // this.$children[0].showMessage();   //不常用
                // console.log(typeof this.$children);
                this.$refs.myCpn.showMessage();    //常用
               } 
            },
            components:{
                cpn:{
                    template:"#cpn",
                    methods:{
                        showMessage(){
                            console.log("showMessage");
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>

 

我啥都会
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue组件 $children,$refs，$parent的使用详解
08-29
然后，在父组件中，我们可以通过 `this.$refs.one` 访问这个子组件，包括访问子组件的数据和调用它的方法。 $parent 属性 $parent 属性允许子组件访问父组件。例如： ```javascript getParent() { let a = 1; ...
vue父子组件间引用之$parent、$children
10-15
总结来说，Vue的`$parent`和`$children`提供了直接的父子组件引用，而`$refs`提供了一种更安全、更灵活的方式来访问子组件。在设计组件通信时，应根据具体需求选择合适的方式，同时要注意保持组件的独立性和可维护性...
vue父子组件传值之$parent、$children、$refs
djh052900的博客
01-20 4921
vue父子组件传值之$parent、$children、$refs
vue 父组件通过$refs获取子组件的值和方法详解
10-16
今天小编就为大家分享一篇vue 父组件通过$refs获取子组件的值和方法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue组件通讯$parent和$children获取单签组件的⽗组件和当前组件的⼦组件的例子
最新发布
codedadi的博客
05-28 692
在 Vue 中，$parent 和 $children 是实例属性，允许你访问组件的父组件和子组件。但是，请注意，这些属性主要用于在开发过程中进行调试和临时访问，并不推荐在正常的组件通信中使用，因为它们破坏了组件的封装性和可重用性。在这个例子中，父组件通过 $children 数组可以访问到它的子组件（尽管我们只知道第一个子组件），而子组件则可以直接通过 $parent 访问到它的父组件。不过，为了满足你的要求，我将提供一个简单的例子来说明如何使用 $parent 和 $children。
24vue学习_父组件调用子组件$children,$refs
chencaw的专栏
02-07 367
正常情况下都用$refs 1父组件调用子组件$children <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title-hellovuejs</title> </head> <body> <!-- 父组件模板 --> <div id ="app">
Vue中父组件访问子组件
weixin_55803498的博客
05-07 162
**children∗∗通过children** 通过children∗∗通过children方法能够让父组件访问子组件但是访问子组件时要么全部访问，要么以数组的形式在$children后加上索引号访问某一个子组件，如下所示。 <body> <div id="app"> <cpn></cpn> <cpn></cpn> <button @click="btnClick">
vue.js父组件访问子组件
零小唬的博客
12-02 476
vue.js父组件访问子组件
Vue 父子组件访问
一只萌萌的萌新的博客
07-06 158
1.父组件访问子组件 $children(开发一般不用) 这个拿所有的 <div id="app"> <cpn></cpn> <cpn></cpn> <cpn></cpn> <button @click="btnClick">按钮</button> </div> <template id="cpn"> <div&gt
Vue子组件向父组件通信与父组件调用子组件中的方法
08-27
Vue 子组件向父组件通信与父组件调用子组件中的方法 Vue 子组件向父组件通信是指子组件将数据或事件传递给父组件的过程，而父组件调用子组件中的方法则是指父组件可以调用子组件中的方法来实现某些功能。这两种方式...
vb.net 同时给多个属性赋值_react父组件像children属性里的子组件传值的思考
weixin_39564510的博客
10-21 77
之前的造轮子里，有遇到过这个问题的。当时就直接用的context做的。因为想了想，确实是没有想到如何从父组件那里传到children那里的。今天群里的一个挺流弊哄哄的装逼的伪大佬，问到了这个问题了哦！有另一个大佬告诉他答案。思路，用这个组件的children属性，这个属性赋值为，拿到对应的children组件数组，或者类数组，然后map遍历这个类数组，返回单个组件的clone的组件，用 react...
Vue中父子组件的访问方式
A____t的博客
04-22 391
父访问子：this.$children或this.$refs.ref 子访问父：this.$parent和this.$root 示例一： <!-- 父组件 --> <div id="app"> <h2>父组件</h2> <h2>{{message}}</h2> <button @click="btnClick">父组件按钮</button> <!-- <cpn :cmessage
Angular中父组件通过ViewChild调用子组件的方法
BADAO_LIUMANG_QIZHI的博客
04-30 987
场景 Angualr中通过原生js和ViewChild的方式获取dom: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105860965 通过ViewChild不仅可以获取dom还可以实现在父组件中调用子组件的方法。 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关...
vue父组件向子组件进行传值 父组件用$children主动获取子组件的属性方法
金大大的博客
05-05 3519
父组件向子组件进行传值 父组件： <template> <div> <h2>我是父组件：</h2> <div> <input v-model="parementMsg"/> </div> <div> <!-...
Vue进阶（幺捌贰）：父子组件元素获取、方法互相调用
IT全栈 华强工作室
04-13 3602
场景复现 在项目开发过程中，通过父子组件方式嵌套项目本身页面，在加载到子组件页面时，对子组件页面元素操作，发现document.getElementsByClassName(className)报空数组。 原因分析 解决方法
牛客刷题——前端面试【八】谈一谈组件化开发中父访问子（children、ref）
yzq0820的博客
10-01 1470
refs方式：ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。​ 父组件访问子组件，有时候需要直接操作子组件的方法，或是属性，此时需要用到$children。并不保证顺序，也不是响应式的。**如果你发现自己正在尝试使用。来生成子组件，并且使用 Array 作为真正的来源。直接获取**当前实例的直接子组件，需要注意。来进行数据绑定，考虑使用一个数组配合。
Vue.js之父组件调用子组件的方法、获取子组件的数据
weixin_44827643的博客
08-11 4124
本文介绍父组件如何直接操纵子组件的方法和数据
$children与$refs的基本使用
xiangyizhixuexi的博客
06-17 241
在组件中访问子组件有两个种方法，一种是$children，另外一种是$refs，而这两个的用法又格外不同。 $children： 如图
vue中父组件调用子组件的方法有几种方式
08-30
在Vue中，父组件调用子组件的方法有以下几种方式： 1. 使用`ref`引用子组件：在父组件中使用`ref`给子组件命名，然后通过`$refs`访问子组件的实例，从而调用子组件的方法。 ```html <template> <div> <child-component ref="child"></child-component> <button @click="callChildMethod">调用子组件方法</button> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { callChildMethod() { this.$refs.child.childMethod(); } } } </script> ``` 2. 使用事件派发（$emit）：在子组件中定义一个方法，然后通过`this.$emit`触发自定义事件，父组件监听该事件并调用相应的方法。 ```html <template> <div> <button @click="childMethod">点击触发自定义事件</button> </div> </template> <script> export default { methods: { childMethod() { this.$emit('child-event'); } } } </script> <template> <div> <child-component @child-event="parentMethod"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { parentMethod() { // 调用父组件方法 } } } </script> ``` 3. 使用`$children`：在父组件中使用`$children`获取所有子组件的实例数组，然后调用相应的方法。 ```html <template> <div> <child-component></child-component> <button @click="callChildMethod">调用子组件方法</button> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { callChildMethod() { this.$children[0].childMethod(); } } } </script> ``` 这些是Vue中父组件调用子组件方法的几种常见方式，你可以根据实际情况选择适合你的方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我啥都会

如果觉得对您有帮助，打赏一下吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值