VUE 子组件向父组件传参（事件传值）

最新推荐文章于 2025-05-17 15:18:47 发布

大表哥6

最新推荐文章于 2025-05-17 15:18:47 发布

阅读量632

点赞数

CC 4.0 BY-SA版权

文章标签： VUE 父子组件通信子组件向父组件传参

本文链接：https://blog.youkuaiyun.com/big_borther6/article/details/80056818

1.在子组件的方法中注册一个事件用 this.$emit("事件名称"，"要传递的参数")。

2.要在子组件中触发这个方法

3.在父组件引用子组件的时候用v-on 指令绑定注册的事件名称。

4.然后就可以操作传过来的值了

举个栗子：

 父组件
<template>
  <div id="home">
    <app-header v-on:dian="updateTitle($event)"></app-header>
  </div>
</template>
<script>
  import Header from './Header'
  export default {
    name: 'home',
    components:{
      "app-header":Header,
    },
    data(){
      return{
	title:"",
      }
    },
    methods:{
      updateTitle(aa){
        alert(aa)
        this.title=aa;

      },
    }
  }
</script>
子组件
<template>
  <header >
    <h3 v-on:click="changeTitle()">点击时传给父组件</h3>
  </header>
</template>

<script>

export default {
  data() {
    return {
      title2: "Vue Demo"
    }
  },

  methods: {
    changeTitle(){
	注册事件
      this.$emit("dian","header子向父传值")
    },
 
  },