vue3 子组件动态接受父组件的传值

最近边学vue边做项目demo，也是苦，一路磕磕碰碰，遇到很多值得学习的问题都没来得及整理。

忙里偷闲悄悄记一笔先，我怕回头看又得琢磨

今天研究的是如何父组件动态改变子组件的props属性内容，子组件要监听到变化并作出回应。

功能描述：一个图+一张表+按钮控制

实现：点击数据行或者按钮，图形跟着变化

直接贴效果：

其中我的图跟table是两个独立的子组件

组件通信就不重复介绍了，可以参考我的上一篇

大致思路：数据控制是二维的，不同按钮代表不同类型，table数据行代表一个类型下的某一个类别数据吧！em....比较粗糙，凑合理解

　　　　所以在动态给echarts图形传入数据时需要2个参数来确定具体数据，比如说到底看产品1的收入还是成本，还是看产品2的...

　　　　用tableRow表示产品类别（指table）；typeIndex表示数据类型(合计，成本，利润，指按钮)

　　　　今天难点是图形组件如何监听动态的tableRow和typeIndex的变化，也会简单说一下如何获取tableRow给父组件

接下来：

table 跟父组件

1.子组件table，如何获取row的index

图形组件跟父组件

2.echarts子组件

我就默认大家会用echarts了哈...有时间再整理如何引用

父组件：

按钮点击传值的代码省略啦，这个不难，就是绑定数据，都是在父组件操作，不再贴代码了哈。

接下来今天主角出场了（终于写到你了）

图形子组件：

我是属性接受的是数字类型的值，所以监听和赋值给data是ok的，如果是对象呢？下次遇到这个问题继续研究....

差不多先，继续开发~~~

这是比较粗糙的~~~

原文地址：https://www.cnblogs.com/yflbk-2016/p/11017603.html

时间： 2024-09-30 20:46:06

vue3 子组件动态接受父组件的传值的相关文章

Vue子组件向父组件通信，父组件向子组件通信

首先,子组件代码如下 <template> <div style="border:1px solid black;width:400px;"> <h3>我是子组件里的</h3> <button>点击按钮子组件传递父组件</button> <div>我是父组件传子组件显示的:我还没有值</div> </div> </template> <script> ex

父组件如何获取子组件数据，子组件如何获取父组件数据，父子组件如何传值

1.父组件如何主动获取子组件的数据方案1:$children $children用来访问子组件实例,要知道一个组件的子组件可能是不唯一的,所以它的返回值是个数组定义Header.HelloWorld两个组件 <template> <div class="index"> <Header></Header> <HelloWorld :message="message"></HelloWorld>

我们知道,父组件使用 prop 传递数据给子组件.但子组件怎么跟父组件通信呢?这个时候 Vue 的自定义事件系统就派得上用场了. 使用 v-on 绑定自定义事件每个 Vue 实例都实现了事件接口,即: 使用 $on(eventName) 监听事件使用 $emit(eventName, optionalPayload) 触发事件 Vue 的事件系统与浏览器的 EventTarget API 有所不同.尽管它们运行起来类似,但是 $on 和 $emit 并不是addEventListener 和

子组件如何改变父组件的state

子组件调用父组件的方法,从而改变父组件中state中的值 //父组件 change (value) { console.log(value) this.setState({ red: value.red }) console.log(this.state) } render () { return ( <> {this.state.red && this.state.red == 1 ? ( <div>red == 1</div> ) : null} &

vue.js组件之间通讯--父组件调用子组件的一些方法，子组件暴露一些方法，让父组件调用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div></body><script src="node_modules/vue/

vue子组件向传父组件传值

子组件: <template> <div class="app"> <input @click="sendMsg" type="button" value="给父组件传递值"> </div> </template> <script> export default { data () { return

vue--父组件向子组件传参--父组件定义v-bind:参数名--子组件接收props----子组件调用父组件的方法（子组件向父组件传参）父组件@事件名称--子组件接收this.$emit

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

vue子组件值跟着父组件改变

父组件 <template> <div id="list"> 父组件的值<input type="text" v-model="parentVal"> <div> <child :inputData="parentVal"></child> </div> </div> </template> <script>

Vue事件在组件中的简单使用以及子组件事件触发父组件自定义事件

在Vue中,通过v-on 来监听DOM事件,可以通过@简写代替. 一个简单的在组件中的事件调用示例在template的Html中使用v-on或@监听一个click事件,并指定事件执行handleClick方法. handleClick需要在组件的methods集合中定义. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta