vue父组件向子组件传值_vue什么是父子组件

全栈程序员-用户IM • 2022年11月2日上午9:36 • 未分类

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46，售后保障稳定

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

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

1、父组件向子组件传值

<!-- 父组件 -->
<!-- 父组件调用子组件，看成是调用子组件函数，给子组件传值，就是给函数传参数 -->
<template>
	<div>
		<!-- 传递动态值前面加个冒号: -->
		<!-- 传递静态值就不需要冒号 -->
		<childComponent :msg="msg1" />
	</div>
</template>
<script> import childComponent from "./child.vue";//引入组件 export default{ 
     components:{ 
     childComponent//注册组件 }, data(){ 
     return{ 
     msg1:"你好" } } } </script>

Jetbrains全家桶1年46，售后保障稳定

<!-- 子组件 -->
<!-- 把子组件看成一个函数，props里面就是子组件接受的参数 -->
<template>
	<div>
		{
  
  {msg}}
	</div>
</template>
<script> export default{ 
     props:{ 
     msg:{ 
     type:String, default:"1" } } } </script>

2、子组件向父组件传值

<!-- 父组件 -->
<!-- 子组件向父组件传值就不一样了，需要用到$emit和$on -->
<!-- 父组件监听函数使用@后面接上函数名 -->
<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>

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