Maison > interface Web > js tutoriel > Comment obtenir des données du composant enfant dans le composant parent vue

Comment obtenir des données du composant enfant dans le composant parent vue

一个新手
Libérer: 2018-05-14 15:49:52
original
3383 Les gens l'ont consulté


<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>
Copier après la connexion

J'ai écrit un sous-composant pour télécharger des images. Le composant parent doit obtenir l'adresse de l'image téléchargée par le sous-composant

Méthode 1 : Donnez le sous-composant correspondant Ajoutez ref

au composant et le composant parent obtiendra les données correspondantes de thi.$ref.avatar lorsqu'il sera finalement soumis, car ici vous pouvez vous assurer que l'image a été. téléchargée, sinon si l'image n'a pas été téléchargée, la valeur que vous obtenez doit être nulle.

Méthode 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>
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal