快速理解Vue父子组件传值

谁践踏了优雅 2024-04-19 09:50 36阅读 0赞

###### 组件化开发是目前前端开发必备的开发技能，组件化开发可以大大提高开发效率 ######

###### 今天整理一下Vue的父子组件传值方式，方便还没有理解的朋友学习。 ######

###### 1、父组件向子组件传值 ######

<template>
    	<div>
    		
    		
    		<childComponent :msg="msg1" />
    	</div>
    </template>
    <script> import childComponent from "./child.vue";//引入组件 export default{ components:{ childComponent//注册组件 }, data(){ return{ msg1:"你好" } } } </script>

<template>
    	<div>
    		{
       {msg}}
    	</div>
    </template>
    <script> export default{ props:{ msg:{ type:String, default:"1" } } } </script>

###### 2、子组件向父组件传值 ######

<template>
    	<div>
    		
    		<childComponent @eventName="handleEvent" />
    	</div>
    </template>
    <script> import childComponent from "./child.vue";//引入组件 export default{ components:{ childComponent//注册组件 }, methods:{ handleEvent(data){ //监听子组件触发的函数，data为子组件给父组件传的值 console.log(data); } } } </script>

<template>
    	<div>
    		<button @click="triggerEvent">给父组件传值</button>
    	</div>
    </template>
    <script> export default{ data(){ msg:"给父组件的信息" }, methods:{ triggerEvent(){ this.$emit("eventName",this.msg);//第一个参数是触发的事件名称，对应着父组件@监听的名字，第二个参数是传给父组件的额外参数，传递多个参数可以直接传对象过去。 } } } </script>

###### 大致讲解如上，个人理解都在备注里面了，如果有没有讲清楚的或者其他不懂的请留言，我会回复各位并更新博客的，以便后面读者阅读！ ######