Vue学习--子组件向父组件传值

最新推荐文章于 2023-11-14 14:12:24 发布

晓の夕

最新推荐文章于 2023-11-14 14:12:24 发布

阅读量109

点赞数

分类专栏：学习笔记文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_43826965/article/details/114009681

版权

学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue.js中实现子组件向父组件传递值的过程，通过一个具体的例子展示了子组件中触发自定义事件，并在父组件中监听该事件来接收并处理传递的数据。主要涉及`$emit`方法的使用和事件监听。

摘要由CSDN通过智能技术生成

Vue–子组件向父组件传值

//子组件
<template>
    <div id="foot">
        <li @click="point(1)">first</li>
        <li @click="point(2)">secend</li>
        <li @click="point(3)">thred</li>
    </div>
</template>
<script>
export default {
    methods:{
        point(m){
        //$emit("自定义事件名"，需要传的参数)
        //$emit
            this.$emit("show",m)
        }
    },
}
</script>

//父组件
<template>
  <div id="app">
<foot @show="showit"></foot>
//自定义事件写在定义的组件中，@事件名="function"
  </div>
</template>
<script>
//引入子组件
import foot from './components/footer'
export default {
	data(){
		return{
			at:"",
		}
	},
	//注册组件
  	components:{
    	foot
  	},
  	methods:{
    	showit(index){
    	//index是子组件传过来的值
      	this.at=index
    }
  }
}
</script>