vue中父子组件通信的实例

最新推荐文章于 2022-02-07 16:10:25 发布

原创最新推荐文章于 2022-02-07 16:10:25 发布 · 196 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了在Vue中实现父子组件间通信的具体方法。通过一个计数器示例，展示了如何使用props向下传递数据，以及如何通过$emit触发事件来更新父组件的状态。此过程深入解析了组件间的交互机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue父子组件传值</title>
  <script src="vue.js"></script>
</head>
<body>
<div id="app">
  <counter :count="0" @inc="handleIncreaseClick"></counter>
  <counter :count="1" @inc="handleIncreaseClick"></counter>
  <div>{{total}}</div>
</div>
<script>
  var counter={
    props:['count'],
    template:'<div @click="handleClick">{{number}}</div>',
    data(){
      return {
        number:this.count
      }
    },
    methods:{
      handleClick:function(){
        // this.count++;
        this.number=this.number+2;
        this.$emit('inc',2);
      }
    }
  };
  var app=new Vue({
    el:'#app',
    components:{
      counter
    },
    data:{
      total:1
    },
    methods:{
      handleIncreaseClick(step){
        this.total+=step
      }
    }
  })
</script>
</body>
</html>