vue親コンポーネントの子コンポーネントからデータを取得する方法

<FormItem label="上传头像" prop="image">
  <uploadImg :width="150" :height="150" :name="&#39;avatar&#39;" size="150px*150px" ref="avatar"></uploadImg></FormItem>
 <FormItem label="上传营业执照" prop="businessLicence">
  <uploadImg :width="350" :height="200" :name="&#39;businessLicence&#39;" size="350px*200px" ref="businessLicence"></uploadImg></FormItem>

画像をアップロードするためのサブコンポーネントを作成しました。親コンポーネントは、サブコンポーネントによってアップロードされた画像アドレスを取得する必要があります。

方法 1: 対応するサブコンポーネントに ref を追加します

親コンポーネントは、最終的に送信されたときにこれを取得します。 .$ref.avatar. ここで画像がアップロードされていることを確認できるため、対応するデータで十分です。アップロードされていない場合、取得する値は空になります。

方法 2: $emit()

/*
    子组件*/<template>
    <input type=&#39;file&#39; @change="changeUrl" />
</template>
<script>export default {
    methods: {
        changeUrl(e) {            
        this.$emit(&#39;changeUrl&#39;, e.currentTarget.files[0].path)
        }
    }
}</script>/*
    父组件*/<template>
    <FormItem label="上传营业执照" prop="businessLicence">
        <uploadImg :width="350" :height="200" :name="&#39;license&#39;" size="350px*200px" @changeUrl="getUrl"></uploadImg>
    </FormItem>
</template>
<script>export default {
    methods: {
        getUrl(path) {            //这个就是你要的path,并且会双向绑定        }
    }
}</script>

以上がvue親コンポーネントの子コンポーネントからデータを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。