1.组件中的父子关系。
明确父子关系,你才可以更深入的去观看组件的自定义事件,通过Vue 来分析element 的自定义事件的交互原理之Checkbox 多选框 https://blog.csdn.net/jiaoqi6132/article/details/106838820
父子关系,你要通过vue 单文件来查看,他们之间相互依赖,
我举一个例子,就是这个,它中间有很多螺丝孔,
1.螺丝孔就是父组件中引用的HelloWorld。
2.孔螺纹可以说就是这个helloworld 绑定的属性
3.螺丝钉就是子组件的单文件vue 。
4.螺丝钉的螺纹就是单文件vue模板绑定的属性
我们假设螺丝钉就是最小的单位。他就是用铁制作的,其中没有别的组件。
5.那么那些方法和data 就是螺丝钉的材料。
6.螺丝钉固定在螺纹孔上。他们之间的相互配合和相互运动,包括了螺纹之间的(挂载时候挂载标签helloworld和模板的融合),如果从力学角度他们还包括了父组件对子组件的力(各方法之间)
所以现在的问题,我们分成了两大类,如上所说。
1.props/ e m i t / emit/ emit/attr
1.我们使用集合的定义来看
vm.$emit( eventName, […args] )
触发当前实例上的事件。附加参数都会传给监听器回调。
孔螺纹中,监听welcome事件,然后触发父组件中的函数。这里我们看到挂载点和模板的数据完全不一样。甚至各干各的,因此我们将helloworld 划归为父组件,而子组件就是自己,所以其实我们就按照Vue 的物理界限来分父子。两个v-on 是不一样的。
子组件的v-on监听click 事件,提交welcome事件给父组件。
而父组件的v-on 监听welcome 事件。来触发自己范围内的事件。
这里我们补上第七点。
7.父子之间 ,关系明确,泾渭分明。
而且我们可以看到,我们可以通过emit 向父组件传送参数。
如果是父组件本身自己的方法
$attr
默认情况,挂载点上的属性和模板会互相融合 ,合并。一些则会覆盖。
当你使用
他有重新出现。
我们加上.native
一样可以触发,但是他是有问题,他返回的是一个object 事件,而不是值。
我们去掉native
event.target
event.target.value
2.我们利用方向性来看。
2.自定义事件中的$listeners
从组件本身讲,这样的
$listener 如果只是封装下事件,那一点都没有意义,关键他能放父组件上传方法。
我们确定稿这些红线,但是props 的value 的值是哪里来的,那就是父组件的值,而不是input来的。因为他要达到一个原生的目的。
当我们将.native 去掉。
focus 也是可以的
1.$listener的出现就是为了解决原生事件。
2.同时他可以向父组件传递方法
3.v-model 双向传递
也是通过props 返回
他的原型是
<input v-bind:value=``"inputValue"` `v-on:input=``"inputValue = $event.target.value"``>
他是双向绑定,但是,如果你用这个searchText 作为函数,他是不会有任何返回的。正如上面所见,他是通过$event.target.value来作为searchText的值,本身就是表达式。
4.sync
这里一定要用$event
。sync 是可以修改父级的属性
动态卸载