我目前正在学习VueJs并摆弄Chart.js(https://github.com/apertureless/vue-chartjs)。我试图让甜甜圈具有反应行为，但我只使用ref属性使其发挥作用，据我所知，这是一种糟糕的风格。我的第一个问题是，避免$refs是好风格的假设是否成立。
我的方法的第一个问题是我不知道mixin，但关于如何使用vueChartjs的唯一例子反应性地使用了它(https://github.com/apertureless/vue-chartjs/blob/master/src/examples/ReactiveExample.js是参考点)我在Vue组件中创建了一个名为updateData的方法，它将重置我的组件chartData，然后将其设置为道具数据。首先，这是我的代码：
chart.blad.php(web视图)：
<html>
<head>
<meta charset="utf-8">
<title>Testchart</title>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div id="app">
<h1>Testchart</h1>
<doughnut :data="doughnut_data" :options="doughnut_options" ref="chart"></doughnut>
<button-reduce v-on:numberreduced="reduce"></button-reduce>
</div>
<script src="js/app.js" charset="utf-8"></script>
</body>
</html>
app.js:
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('doughnut', require('./components/testDoughnut.vue'));
Vue.component('button-reduce', require('./components/button.vue'));
const app = new Vue({
el: '#app',
data: {
doughnut_data: {
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
datasets: [
{
backgroundColor: [
'#41B883',
'#E46651',
'#00D8FF',
'#DD1B16'
],
data: [40, 20, 80, 10]
}
]
},
doughnut_options: {
responsive: true,
maintainAspectRatio: false
}
},
methods: {
reduce() {
this.doughnut_data.datasets[0].data[2] = this.doughnut_data.datasets[0].data[2] - 5;
this.$refs.chart.updateData();
}
}
});
最后但同样重要的是，我的Vue组件测试Doughnut.Vue
<script>
import { Doughnut, mixins } from 'vue-chartjs'
export default Doughnut.extend({
mixins: [mixins.reactiveData],
props: ["data", "options"],
data() {
return {
chartData: ''
}
},
created() {
this.updateData();
},
mounted () {
this.renderChart(this.chartData, this.options)
},
methods: {
updateData() {
this.chartData = {}; // without this step, it does not work (no reactive behaviour). Why is this necessary?
this.chartData = this.data;
}
}
})
</script>
出现了以下问题：
- (来自上面)：避免$refs是一件好事吗
- 为什么不能直接从我的网络视图更新chartData？
:chartData="doughnut_data"不起作用，我需要使用自定义道具"data"> - 在我的testDoughnut.vue中，有必要先将chartData重置为一个空的JSON对象，然后再将其分配给this.data。为什么需要重置？从桌面开发(C#)开始，我认为我可以直接编写
this.chartData = this.data，而不需要一个空对象 - 有没有更好的方法来处理这个问题，而不是像我那样(使用裁判)
vue chartjs作者在这里。
关于mixin：包含两个mixin。vue中的Mixin只需将一些逻辑和功能提取到单独的文件中，就可以重用它们。
就像医生说的，有两个混合体。
- reactiveProp和
- reactiveData
因为，有两种主要场景，即如何将数据传递到图表组件。一种可能性是，例如在laravel环境中，通过道具将数据直接传递给组件。
<my-chart :chart-data="..."></my-chart>
另一个用例是，如果您有一个API并发出fetch/API请求。但是，您的图表数据不是道具，而是vue的data()函数中的变量。
修复
你的代码有点过于复杂了。
您更需要reactiveProp混合。
<script>
import { Doughnut, mixins } from 'vue-chartjs'
export default Doughnut.extend({
mixins: [mixins.reactiveProp],
props: ["options"],
mounted () {
this.renderChart(this.chartData, this.options)
}
})
</script>
mixin将创建一个名为chartData的道具，并向其中添加一个观察程序。每次数据更改时，它都会更新图表或重新渲染。如果添加新的数据集，则需要重新渲染图表。
您的问题
- 如果你使用正确的mixin，你就不需要$ref
- 模板中的camelCase需要用破折号"-"书写
- 也许它有问题，因为您复制了数据属性。mixin总是自动将chartData创建为属性或data()函数变量。所以你不需要自己创造它。不过，我想这可能是比赛条件。其中数据没有设置在vue的create()钩子中。https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-图表