[Vue] Parent and Child component communcation
Vue and Component Parent child
2023-09-14 08:59:19 时间
By building components, you can extend basic HTML elements and reuse encapsulated code. Most options that are passed into a Vue constructor can be passed into a component. Each instance of a component has an isolated scope. Data can only be passed one direction and it must be from parent to child using props
. To communicate with the parent element, use the $emit
method.
Child component:
<template> <section> <h1>Child component {{name }}</h1> <div> Child button: <button @click="insideInc">Inc from inside {{insideCounter}}</button> </div> </section> </template> <script> export default { name: 'item-description', props: ['counter', 'name'], data: function() { return { insideCounter: this.counter } }, methods: { insideInc() { this.insideCounter += 1; this.$emit('total', this.insideCounter); } } } </script>
From parent, we will receive:
props: ['counter', 'name'],
And we rename 'counter' from parent to 'insideCounter':
data: function() { return { insideCounter: this.counter } },
If we want to tell parent component, we can use '$emit':
this.$emit('total', this.insideCounter);
From parent component:
<item-description v-bind:counter = "counter" v-bind:name = "message" @total="getTotalFromChild" ></item-description>
<script> import ItemDescription from '../components/item-description'; components: { ItemDescription }, .. </script>
相关文章
- Java项目毕业设计:基于springboot+vue的电影视频网站系统「建议收藏」
- vue 加载页面时触发时间_Vue 刷新页面时会触发事件吗「建议收藏」
- 如何查看Vue项目vue的版本号
- vue父子组件传值:详解父组件向子组件传值(props)
- 请简述什么是Vue组件化开发_vue组件化开发
- vue 最简易的邮箱正则表达式[通俗易懂]
- vue JS 对象转数组[通俗易懂]
- vue子组件传值给父组件_子组件调用父组件中的方法
- 利用Vue自定义指令让你的开发变得更优雅
- 关于vue-admin-work后台前端管理框架重大升级
- Vue项目:菜农管理 【maven + spring boot + RESTFul + SSM+vue + axios】
- Vue Demi是如何让你的库同时支持Vue2和Vue3的
- Vue学习笔记之ElementUI 最大值最小值
- BetterScroll2.0在Vue中的基本使用
- vue.js客服系统实时聊天项目开发(二)
- 为在线客服系统接入chatGPT(四):chatGPT接口vue网页版,可以联系上下文语境,可以实现自己的chatGPT,附代码
- Vue常见面试题
- vue入门篇之Vue.js 组件
- 条件MySQL 子句之间`AND`操作符多条件查询(mysql多个and)
- 使用Vue框架使用MSSQL数据库实现快速开发(vue mssql)
- Oracle数据库中的AND查询(oracle and查询)
- Vue结合Redis,加快数据读取速度(vue读取redis)
- Vue如何连接Redis(vue怎么连接Redis)
- Vue结合Redis实现性能优化(vue引入redis)
- 优化网站性能,Vue搭配Redis缓存更加有效(vue使用redis缓存)
- 从零开始Vue项目中使用Redis(vue使用redis)
- Vue搭配Redis做针对性取值(vue redis取值)
- Oracle 数据库中使用AND拼接的威力(oracle中and拼接)