您当前的位置:首页 > 前端 > vue > vue父子组件间的相互通信

vue父子组件间的相互通信

日期:2021-08-06 06:50:01    浏览:114

父传子props

父组件

 //将articles变量传递给子组件
<MySection :articles="articles"></MySection>

子组件

  <template>
{{ articles }}
</template>


//两种写法,都可以接受
  // props:[
  //     'articles'
  // ],
  props:{
    articles:{
      type:Array,
      default:['计算器'],
      required:true
    }
  },

子传父$emit

子组件

<template>
//定义一个单击事件,changenum(num),changednum是我们自定义的事件名称,num需要传递给父组件的参数
<button @click="changenum(num)">改变父组件的值</button>
</template>

export default {
  name: "MyList",
  data(){
    return {
      num:3
    }
  },
  emits:['mycountevent'],//写上自定义事件名称,不然有警告
  methods:{
//调用这个方法
    changenum(num){
      this.$emit('mycountevent',num)
    }
  }
}

父组件

<template>
  <p>我是父组件的值 {{ count }}</p>
<MyList :articles="articles"  @mycountevent="mydemo"></MyList> //接受来自子组件的方法mycountevent调用当前组件mydemo方法
<MyList :articles="articles"  @mycountevent="mydemo"></MyList>
</template>

<script>
import MyList from "@/components/comp/MyList";
export default {
  name: "MySection",
  data(){
    return{
      count:0
    }
  },
  //两种写法
  // props:[
  //     'articles'
  // ],
  props:{
    articles:{
      type:Array,
      default:['计算器'],
      required:true
    }
  },
  components:{
    MyList
  },
  methods:{
    mydemo(num){
      this.count=this.count + num
    }
  }
}
</script>

 

Tags: vue

世事无常

要有遥不可及的梦想,也要有脚踏实地的本事