鍍金池/ 問答/HTML/ 請(qǐng)問vue父組件怎么調(diào)用子組件里的input = “file”，讓他點(diǎn)擊頭像的時(shí)

請(qǐng)問vue父組件怎么調(diào)用子組件里的input = “file”，讓他點(diǎn)擊頭像的時(shí)候就選擇圖片

想做一個(gè)更換頭像的功能

clipboard.png
這是父組件personal，代碼如下

clipboard.png

portriat.vue是上傳圖片裁切的組件
也是父組件personal的子組件；
點(diǎn)擊頭像通過調(diào)用子組件的方式顯示出來，

clipboard.png
這是子組件效果

clipboard.png
點(diǎn)擊選擇可以選擇圖片，進(jìn)行裁切上傳，但是感覺這種方式太累贅了，
想要在點(diǎn)擊父組件的時(shí)候顯示子組件，同時(shí)，選擇圖片的功能也彈出來，
但是子組件是通過
clipboard.png
標(biāo)簽實(shí)現(xiàn)選擇圖片路徑的功能，請(qǐng)問父組件能調(diào)用這個(gè)功能嗎？如果不能，請(qǐng)問能不能將input type=“file”，保存為一個(gè)事件呢再調(diào)用呢？求大神指教.

回答
編輯回答
懶豬

一般前端處理這樣的事情，都是把 <input type=file> 處理透明，然后放置在圖片上，這個(gè)時(shí)候點(diǎn)圖片的時(shí)候，其實(shí)點(diǎn)的是 input 。。
僅供參考。

2017年9月22日 11:12
編輯回答
慢半拍

子組件加上$refs,通過$refs調(diào)用子組件中的方法，子組件方法里面讓你的file執(zhí)行click();

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>組件</title>
    </head>
    <body>
        <div class="box" ref="box">
            <button @click="btn">aaaa</button>
            {{msg1}}
            <aaa :f="msg1" ref="aaa"></aaa>
        </div>
    </body>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue" ></script>
    <script>
        var aaa={
            data:function(){
                return{
                    msg2:"我是子組件"
                }
            },
            props:['f'],
            template:"<div><h3>{{f}}{{msg2}}</h3><input ref='file' type='file'></div>",
            methods:{
                file:function(){
                    this.$refs.file.click();
                }
            }
        }
        var vm=new Vue({
            el:'.box',
            data(){
                return{
                  msg1:"我是父組件"
                }
            },
            methods:{
                btn:function(){
                    this.$refs.aaa.file();
                }
            },
            mounted () {
                
            
            },
            components:{
                'aaa':aaa
            }
        })
    </script>
</html>
2017年5月17日 23:15