vue父子组件传参之ref

最新推荐文章于 2025-06-10 09:57:51 发布

转载最新推荐文章于 2025-06-10 09:57:51 发布 · 387 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yang656/p/10184335.html

文章标签：

#javascript #ViewUI

本文详细介绍了在Vue中如何实现父子组件之间的传值，通过使用$ref和ref，演示了如何在子组件中更新数据并通过事件向外暴露，最终在父组件中获取子组件的数据进行汇总。

在vue中，传参的常用的就父子组件传参，兄弟组件传参。今天我们说的是父子组件传参中的一种方式$ref和ref

首先我们创建一个子组件并给他添加一个number的值和绑定一个点击事件@click='add()',每次点击加1

  Vue.component('counter', {
            template: `<div @click='add'>{{number}}</div>`,
            data() {
                return {
                    number: 0
                }
            },
　　　　　　　methods: {
　　　　　　　　add() {
　　　　　　　　　　this.number++
　　　　　　　　}
　　　　　　　},
        })

　　并在我们父组件中调用它

<div id='app'>
   <div>
     <counter></counter>
     <counter></counter>
     <div>{{total}}</div>
   </div>
</div>


并且在子组件中使用change方法暴露出去

this.$emit('change')

　当子组件发生改变的时候像外暴露，我们可以打印出来看看

console.log(this.$emit('change'))

很显然我们得change方法是起作用了的　　　　　

<counter ref="one" @change='hand'></counter>
<counter ref="two" @change='hand'></counter>

我们再通过ref 传入两个参数，并且添加change事件

在父组件中写入
　　var app = new Vue({
　　　　el: '#app',
　　　　data:{
　　　　　　total:0
　　　　},
　　　　methods:{
　　　　　　hand(){
　　　　　　　　this.total = this.$refs.one.number+ this.$refs.two.number
　　　　　　}
　　　　}
　　})

这样我们就完成了父组件的传值

完整代码如下

<!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">
    <title>Document</title>
    <script src='vue.js'></script>
</head>
<body>
    <div id='app'>
        <counter ref='one' @change='hand'></counter>
        <counter ref='two' @change='hand'></counter>
        <div>{{total}}</div>
    </div>

    <script>
        Vue.component('counter',{
            template:`<div @click='add'>{{number}}</div>`,
            data() {
                return {
                    number:0
                }
            },
            methods: {
                add() {
                    this.number++
                    this.$emit('change')
                    console.log(this.$emit('change'))
                }
            },
        })
        var app = new Vue({
            el:'#app',
            data:{
                total:0
            },
            methods:{
                hand () {
                    this.total = this.$refs.one.number+this.$refs.two.number
                }
            }

        })
    </script>
</body>
</html>