时间戳

首页 > 解决方案 > 从主 vue 应用程序调用组件方法

vue.js - 从主 vue 应用程序调用组件方法

问题描述

我是 Vue 的超级新手，我正在尝试进入组件。

基本上，我有我的新 vue 应用程序的主脚本文件（具有基于 setInterval 的倒计时功能和在同一个文件中的 vue 组件（它是一个用画布制成的耐力条），具有宽度增加和减少的方法。基本上，我想每秒减小条形宽度，但我不知道如何调用组件中声明的方法。我想当它们在组件内部声明时，我可以从任何地方访问它们，但我没有找到合适的解决方案（我试过了，$refs但它不起作用）有什么方法可以从我的新 Vue 应用程序中的方法调用addWidth()and函数？subWidth()

谢谢你

这是组件

    Vue.component('stamina', {
    template: '<div><canvas ref="stamina" style="height:25px;width:300px;" /></div>',

    data(){

        return {
            stamina_width:300,

            // vueCanvas: null
        }
    },
  
    methods: {

        drawStamina(){
             // clear canvas
            this.vueCanvas.clearRect(0, 0, 300, 50);

            // draw rect

            this.vueCanvas.rect(20,20, this.stamina_width, 100);

            //colorize with gradient

            var grd = this.vueCanvas.createLinearGradient(0, 0, 300, 0);
            grd.addColorStop(0, "red");
            grd.addColorStop(0.5, "orange");
            grd.addColorStop(1, "green");
            this.vueCanvas.fillStyle = grd;

            //fill the rect with gradient
            this.vueCanvas.fillRect(0, 10,this.stamina_width, 10); 
        },

        addWidth() {
            this.stamina_width += 20
            this.drawStamina()
        },
        subWidth() {
            this.stamina_width -= 20
            this.drawStamina()      
        }

    },

    mounted () {

        var ctx = this.$refs.stamina.getContext('2d');
        this.vueCanvas = ctx;
        var stam = this.stamina_width;

        var grd = this.vueCanvas.createLinearGradient(0, 0, 300, 0);
        grd.addColorStop(0, "red");
        grd.addColorStop(0.5, "orange");
        grd.addColorStop(1, "green");
        this.vueCanvas.fillStyle = grd;
        
        //fill the rect with gradient
        this.vueCanvas.fillRect(0,25,stam,25); 

    }
});


and this is the main vue

   
    var match = new Vue({
    el:'#app',
   
    methods:{
    //call the methods from component stamina
}

标签： vue.jsvuejs2components

解决方案

是的，您可以调用父/子组件的向上/向下方法。您可能需要查看创建自定义事件并监听它们。

我认为可能不那么复杂的另一个选择是考虑使用Vuex。

addWidth通过这种方式，您的所有subWidth逻辑都将驻留在一个集中的位置。您的所有组件——无论嵌套如何，都可以“订阅”这些东西（并在需要时修改它们）。

签出行动。您将调度一个将addWidth其发送到 Vuex 的操作。在负责渲染耐力条的组件中，我将使用计算属性来监视更新。像这样的东西：

computed: {
    barWidth() {
       return this.$store.getters["bar/width"];  // 20
    }
}

这只是一个非常粗略的示例，不太可能是您要查找的内容。

VueSchool也有一些不错的（免费）课程来帮助你熟悉 Vuex。

推荐阅读