Vue 父子关系明确定义以及双向绑定的一部分

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/$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 是可以修改父级的属性

动态卸载