常规的组件传值在uniapp下是可以正常使用的,但是在组件中使用了renderjs模式,常规的通讯就不起作用了。我是参照了官网的例子进行修改的https://uniapp.dcloud.io/frame?id=renderjs;
<template> <view class="content"> <!-- #ifdef APP-PLUS || H5 --> <view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view> <button @click="changeOption">更新数据</button> <!-- #endif --> <!-- #ifndef APP-PLUS || H5 --> <view>非 APP、H5 环境不支持</view> <!-- #endif --> </view> </template> <script> export default { data() { return { option: { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] } } }, onLoad() { }, methods: { changeOption() { const data = this.option.series[0].data // 随机更新示例数据 data.forEach((item, index) => { data.splice(index, 1, Math.random() * 40) }) }, onViewClick(options) { console.log(options) } } } </script> <script module="echarts" lang="renderjs"> let myChart export default { mounted() { if (typeof window.echarts === 'function') { this.initEcharts() } else { // 动态引入较大类库避免影响页面展示 const script = document.createElement('script') // view 层的页面运行在 www 根目录,其相对路径相对于 www 计算 script.src = 'static/echarts.js' script.onload = this.initEcharts.bind(this) document.head.appendChild(script) } }, methods: { initEcharts() { myChart = echarts.init(document.getElementById('echarts')) // 观测更新的数据在 view 层可以直接访问到 myChart.setOption(this.option) }, updateEcharts(newValue, oldValue, ownerInstance, instance) { // 监听 service 层数据变更 myChart.setOption(newValue) }, onClick(event, ownerInstance) { // 调用 service 层的方法 ownerInstance.callMethod('onViewClick', { test: 'test' }) } } } </script> <style> .content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .echarts { margin-top: 100px; width: 100%; height: 300px; } </style>但是官网的例子中,renderjs模式子组件只能穿json数据到service 无法传对象数据到父组件;
解决办法: 反向让子组件介绍父组件穿过来的对象数据即可