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

vue父组件向子组件传值_vue什么是父子组件组件化开发是目前前端开发必备的开发技能,组件化开发可以大大提高开发效率今天整理一下Vue的父子组件传值方式,方便还没有理解的朋友学习。1、父组件向子组件传值<!–父组件–><!–父组件调用子组件,看成是调用子组件函数,给子组件传值,就是给函数传参数–><template> <div> <!–传递动态值前面加个…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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>
大致讲解如上,个人理解都在备注里面了,如果有没有讲清楚的或者其他不懂的请留言,我会回复各位并更新博客的,以便后面读者阅读!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:http://www.javaforall.cn/234588.html原文链接:http://www.javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • kafka主要用来做什么_kafka概念

    kafka主要用来做什么_kafka概念Kafka最初由LinkedIn公司开发的,并于2010年贡献给了Apache基金会,之后成为Apache顶级项目。目前Kafka已经定位为一个分布式流式处理平台,它以高吞吐、可持久化、可水平扩展、支持流数据处理等多种特性而被广泛使用。目前越来越多的开源分布式处理系统如Cloudera、Storm、Spark、Flink等都支持与Kafka集成。Kafka之所以受到越来越多的青睐,与它所“扮演”的三大角色是分不开的:消息系统:Kafka和传统的消息系统(也称作消息中

  • 【ZigBee协议栈简介】

    【ZigBee协议栈简介】1、Zigbee协议栈简介  协议是一系列的通信标准,通信双方需要按照这一标准进行正常的数据发射和接收。协议栈是协议的具体实现形式,通俗讲协议栈就是协议和用户之间的一个接口,开发人员通过使用协议栈来使用这个协议,进而实现无线数据收发。  如图1所示:Zigbee协议分为两部分,IEEE802.15.4定义了PHY(物理层)和MAC(介质访问层)技术规范;Zigbee联盟定义了NWK(网络…

  • 51单片机视频教程下载

    51单片机视频教程下载链接:https://pan.baidu.com/s/1k-utjXO8L5WPxnBWS9mnxw提取码:ylaj以上是本人精心整理的【电子全能资料包】,内含单片机视频教程,整个开发工具包,以及电子书、单片机例程等等…

  • 编程ING:人人都能学会程序设计

    编程ING:人人都能学会程序设计

  • betterintellij 2021.4 激活码【在线破解激活】

    betterintellij 2021.4 激活码【在线破解激活】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • SEO优化网站教程百度_人员优化流程

    SEO优化网站教程百度_人员优化流程一准备1、心态长时间,不断学习。学习建站、基础代码、SEO全过程、实际操作并成功。2、价值与优势流量=价值。SEO是获得客户的技能,通过引流产生价值。①客户更精准,客户是主动的;②成本低、排名稳定、关键词有可扩展性。3、SEO工作①PC站优化:网站架构、页面关系、代码优化、链接推送等;WAP优化:继承PC站的优化成果,进行代码优化、移动适配;②内容发布:管理原创内容、转载内容、用户内容的更新频率与数量;③数据分析:关注收录量、收录率、展现量。④做日志分析,对服务器/网站进行监

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号