Question

我可以使用 ref 从父vue组件访问方法，现在我也想使用 ref 从父vue组件访问有效的数据

Parent.vue：

<v-btn @click="savenewcase()" dark text :disabled="!valid">Save</v-btn></v-toolbar-items>
<NewCaseDialog ref="NewCase"></NewCaseDialog>

<script>
  methods: {
    savenewcase() {
      this.$refs.NewCase.save()
    }
  }
</script>

NewCaseDialog.vue

<template>
    <v-card>
        <v-form v-model="valid" ref="NewCaseForm" @keyup.native.enter="save()">
            <v-container>
                    <v-text-field
                            :counter="64"
                            v-model="vsubject"
                            label="Subject / Judul"
                            prepend-icon="subject"
                    ></v-text-field>
            </v-container>
        </v-form>


        <v-btn @click="save()" :disabled="!valid" color="primary">Save</v-btn>
    </v-card>
</template>

<script>
data: () => ({
            valid: false,
}),
methods:{
            save() {
//run save
}
}
</script>

编辑：我正在使用vuetify

Answer 1

你可以试试 Props ，它更容易。来自文档：

child-component.vue

Vue.component('blog-post', {
  // camelCase in JavaScript
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

parent.vue

<blog-post post-title="hello!"></blog-post>

Vue从父组件访问有效数据

1 个答案: