求教

[caojiaxing]

你好，请问在 vue-img-inputer这个项目里，你引用这个组件的父组件是哪个，在哪里放，因为 git 代码里有几处父子组件交互的地方我看不太懂，所以想找到你的父组件

[waynecz]

你是指 demo 里面吗

[caojiaxing]

比如我平常写一个组件，都会把它当做一个标签引到 app.vue（类似总组件） 里去使用，你的这个类似的总组件在哪里？我主要是想看看它如何被引用的，也就是这个标签里的参数是怎么传的

[caojiaxing]

当然，有那个 demo 的原码就更好了，你那个 demo 写的太棒了！

[waynecz]

这里是入口文件，可以看到这里引入并注册了组件

import imgInputer from '../src/index';
...
Vue.component('imgInputer', imgInputer);

---

然后这里是总组件，可以看到类似这样的代码就是实际使用

<imgInputer v-model="file" accept="image/*" @onChange="fileChange"></imgInputer>

ps: 建议看下文档，里有详细的介绍哦😃，demo 的源码就在仓库下的 demo-src 文件夹内，有兴趣可以看看，写得很乱的哈哈哈

[caojiaxing]

多谢！这个问题是从看不懂组件内双向绑定的那行代码引出的，事实上到现在也没搞懂那一句this.$emit('input', this.file);是什么意思，所以我才想看看父组件。我的疑惑是：你在这里向父组件 emit 了一个 input ，但在父组件里引用这个标签时并未给它赋值相对应的方法呀。还有文章里你解释 v-model 是语法糖那块代码我看懂了，然后你说“所以可以这样文件选择传值”，下面的就看不懂了。小弟刚入门，望大神多解释几句呀，多谢了！

[waynecz]

嗯，我写得是有点简略了，是这样，当子组件 S 在父组 P 件注册的时候检测到 v-model 绑定，相当于 P 为 S 注册了 ($on) 一个自定义的 input 事件 :

自定义事件可以理解为：
现在玩棒球， P 告诉 A 我等会儿要【扔球】，扔过来后你要【接住球并且扔回来】
这里【扔球】就是 P 为 S 绑定的事件，【接住球并且扔回来】就是 S 在【扔球】触发后要做的事情（既事件回调 Callback 函数内的内容），而 这里的【球】就是回调函数的参数

所以在 P 里

S.$on('扔球', ( *球* ) => { 接住 *球* 并且扔回来 })
// 这里的*球*指代参数

而在 S 里，当 S 检测到【扔球】后

S.$emit('扔球', *这个球*)
// 这里的*这个球*指具体的某个被扔的球

---

所以你看，当父组件内绑定

this.$refs.S.$on('input', value => {this.target = value})
// 注意这块代码里所有的 this 指代父组件哦，换个写法就是
P.$refs.S.$on('input', value => {P.target = value})

而子组件

this.$emit('input', this.file)
// 而这里的 this 指代子组件哦，也换个写法
S.$emit('input', S.file)

是不是就是相当于子组件把 S.file 这个值给 P.target 了呢 (P.target = S.file) ， 而这个 target 自然就是 v-model 绑定的值

[caojiaxing]

抱歉呀，这段时间一直忙其他的，没过来看。我现在要模仿你这个写一个 demo，出现一个问题：把几个子组件复用到一个父组件里去，在父组件里某处写点击事件，执行“this.file='';”就可以把刚刚选择的本地图片删掉，但是如果把这个点击事件写到子组件里，却只能打印this.file，却删不掉，请问怎么在子组件的点击事件里删除刚选择的图片？

[waynecz]

父组件内:

<template>
     <Son @change="delPhoto" />
</template>
<script>
    methods: {
        delPhoto() { this.file = null }
    }
</script>

---

子组件内:

<template>
     <Button @click.native="delPhoto" />
</template>
<script>
    methods: {
        delPhoto() { this.$emit('change') }
    }
</script>

[caojiaxing]

试了下，这样同时就把所有子组件里的图片都删掉了，我想只删除指定的那个，也就是说，点击哪个子组件的删除按钮，只删掉这个子组件的图片。求教大神呀，这个 demo 蛮急的，老大要看。能不能留联系方式，在这里讨论不太方便截图什么的

[caojiaxing]

我上午想了好久，最后的问题落在：如何把子组件自己的索引 ，在emit时，通过参数传给父组件。但这个问题应该没法实现吧

[waynecz]

QQ：451578533