Vue 子组件向父组件传参

直接上代码

　　

复制代码
复制代码
<body>
    <div id="counter-event-example">
      <p>{{ total }}</p>
      <button-counter v-on:ee="incrementTotal"></button-counter>
      <button-counter v-on:ee="incrementTotal"></button-counter>
    </div>

    <script>
        Vue.component('button-counter', {
          template: '<button v-on:click="increment">{{ counter }}</button>',
          data: function () {
            return {
              counter: 0
            }
          },
          methods: {
            increment: function () {
              this.counter += 1
              this.$emit('ee', 'cc' )
            }
          },
        })
        new Vue({
          el: '#counter-event-example',
          data: {
            total: 'arg'
          },
          methods: {
            incrementTotal: function (b) {
              this.total  = b + '1';
            }
          }
        })
    </script>
</body>
复制代码
复制代码

　　子组件通过$emit触发父组件的事件，$emit后面的参数是向父组件传参，注意，父组件的事件处理函数直接写函数名即可，不要加(),参数直接传递到了父组件的methods的事件处理函数了。

　　另外，写一个小拾遗。vue子组件用了定义模板组件功能，然后在父组件里定义一个HTML元素绑定这个子组件后才能在父组件通过这个HTML元素使用。

 

　　再说一个非常方便的v-ref

复制代码
<body>
    <div id="parent">
        <user-profile v-ref:profile></user-profile>
    </div>

    <script>
        Vue.component('user-profile', {
            template: '<span>{{ msg }}</span>',
            data: function () {
                return {msg: 123};
            },
            methods: {
                greet: function () {
                    console.log('hhhhh');
                }
            }

        })
        var parent = new Vue({el: '#parent'});
        var child = parent.$refs.profile;
        child.greet();
    </script>
</body>




demo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="counter-event-example">
      <p>{{ total }}</p>
      <button-counter  v-on:ee="incrementTotala"></button-counter>
      <button-counter  v-on:ee="incrementTotala"></button-counter>
    </div>    

    <script>
        Vue.component('button-counter', {
          template: '<button v-on:click="increment">{{ counter }}</button>',
          data: function () {
            return {
              counter: 0
            }
          },
          methods: {    
            increment: function () {
              this.counter += 1
              this.$emit('ee', this.counter ) //向父组件传递参数
            }
          },
        })
        new Vue({
          el: '#counter-event-example',
          data: {
            total: 'arg'
          },
          methods: {
            incrementTotala: function (b,d) {
              this.total  = b;
            }
          }
        })
    </script>
</body>
</html>
posted @   甜菜波波  阅读(443)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示