Question

我有一个按钮组件，我在我自己的组件中使用它。到目前为止工作正常。

此按钮的属性布尔值为＆＃39; loading＆＃39;确定是否显示微调器。我现在的问题是，如何从我的方法链接到此按钮组件并将加载属性更改为true？

<template>
  <div>
    <button-component></button-component>
  </div>
</template>

<script>
  import ButtonComponent from 'ButtonComponent';

  export default {
    components: {
      ButtonComponent
    },
    methods: {
      buttonClick() {
        // Set loading to true
      }
    }
</script>

Answer 1

您可以采用多种方式，我认为最简单的方法是使用v-ref：

<button-component v-ref:loading-button></button-component>

    methods: {
      buttonClick() {
        this.$refs.loadingButton.loading = true;
      }
    }

或者您可以向父级添加加载属性并同步它：

<button-component :loading.sync="loading"></button-component>

    data:{
        loading: false,
    },
    methods: {
      buttonClick() {
        this.loading = true;
      }
    }

与组件中的组件交互

1 个答案: