Question

我是VueJS和JavaScript的新手，非常感谢您的帮助。

我的方法＆＃34; greet＆＃34;不工作，我不确定为什么。当我点击按钮＆＃34;更改为栏＆＃34;我收到错误：

[Vue警告]：财产或方法＆＃34;问候＆＃34;未在实例上定义，但在呈现期间引用。通过初始化属性，确保此属性在数据选项或基于类的组件中是被动的。请参阅：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

在
中找到
---> <Chatjsvue> at src\components\vueChartjs\Chatjsvue.vue
       <App> at src\App.vue
         <Root>

chartjs.vue

<template src="../../views/chartjshtml/chartsjs.html"></template>
<script>
  import LineChart from '@/assets/javascripts/chartjsline'

    export default {
    components: {
      'line-chart': LineChart 
    }
  }
</script>

chartsjs.html

<div class="wrapper">
    <div>
     <ul>
       <li><button v-on:click="greet()">change to bar</button></li>
       <li><line-chart></line-chart></li>
     </ul>
    </div>
</div>

chartsjsline.js

import { Line } from 'vue-chartjs'

export default {
  extends: Line,
  data() {
      return {
         datacollection: {
            //Data to be represented on x-axis
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            datasets: [{
               label: 'Activities ChartJS Line',
               backgroundColor: '#f87979',
               pointBackgroundColor: 'white',
               borderWidth: 1,
               pointBorderColor: '#249EBF',
               //Data to be represented on y-axis
               data: [40, 20, 30, 50, 90, 10, 20, 40, 50, 70, 90, 100]
            }]
         },
         //Chart.js options that controls the appearance of the chart
         options: {
            scales: {
               yAxes: [{
                  ticks: {
                     beginAtZero: true
                  },
                  gridLines: {
                     display: true
                  }
               }],
               xAxes: [{
                  gridLines: {
                     display: false
                  }
               }]
            },
            legend: {
               display: true
            },
            responsive: true,
            maintainAspectRatio: false
         },
      }
   },
   methods: {
      greet() {
        alert('hello');
      }
    },
    mounted() {
      //renderChart function renders the chart with the datacollection and options object.
      this.renderChart(this.datacollection, this.options)
   }
}

Answer 1

您的<line-chart>组件（LineChart的实例）是Chatjsvue组件的子组件。

子方法仍与这些实例绑定。

然而，from the parent component to access its child component非常容易，并且从那里执行他们的方法：

使用ref特殊属性保留对您的子组件的引用：<line-chart ref="myLineChart"></line-chart>
在父方法中，使用this.$refs.myLineChart
然后您可以访问此子实例上的所有内容，包括其方法：this.$refs.myLineChart.greet()

工作示例：

＆＃13;

Vue.component('chart-js', {
  template: '#chartjs',
  methods: {
    lineChildGreet() {
      // Access the child component through $refs.
      // Then you can execute its methods.
      this.$refs.myLineChart.greet();
    },
  },
});

Vue.component('line-chart', {
  template: '#lineChart',
  methods: {
    greet() {
      alert('hello');
    },
  },
});

var app = new Vue({
  el: '#app',
});

＆＃13;

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <chart-js></chart-js>
</div>

<template id="chartjs">
  <div class="wrapper">
    <div>
     <ul>
       <li><button v-on:click="lineChildGreet">greet on child component</button></li>
       <!-- Keep a REFerence to the child component -->
       <li><line-chart ref="myLineChart"></line-chart></li>
     </ul>
    </div>
  </div>
</template>

<template id="lineChart">
  <span>LineChart</span>
</template>

＆＃13;

Answer 2

您需要将greet（）方法添加到chartjs.vue组件，而不是chartjsline。

从父事件触发子组件方法

2 个答案: