vue学习总结

事件的触发和监听(emit，on)

它们是父子组件的时候，可以直接在父组件上绑定事件，然后子组件触发的时候，就可以被监听到。

注意，这里是用v-on 绑定在引用的子组件标签上。然后，你在子组件$.emit(‘changDivText’)就可以触发 父组件里面定义的事件。

他们不是父子组件的时候，就要借用到一个新的实例，来触发和监听事件了。因为什么呢，因为你想想， 

1. <child-one> 我有一个事件，名字叫我的哪个兄弟被点击了 </child-one>
2. <child-two> 我要告诉大哥我被点击了 </child-two>

var bus = new Vue()

bus.$emit('clicked'，{name: '我是二弟'}) ;

1. console.log(name);
2. });

说到事件，就来讲一讲最近写select 组件遇到的点击事件问题。 
已知多选是这样设置的：

checkbox 是这样的

所以写的时候就要借用到checkbox组件。

当我点击的时候，会触发两次，一次是label被点击了，触发了，input 被触发了。就触发了两次，那我一次选上，一次不选上，不是白点击了吗。。。。。

然后，想到监听select 改变，去选择，毕竟select 是因为input 的点击事件被改变的，在点击的时候只会改变一次。 但是，以为这样就解决了吗== 在选项初始化的时候，我要的判断这个选项有没有被选上，就面临着是否会改变select值，改变了就会再次触发选择事件，这个时候，在添加一个已经添加的值，就需要检查是否重复判断。

其实，这个还有一个方法，判断事件的event.target 是否是input, 是在添加值，初始化的时候也不会去添加值了。

组件的值的绑定 v-model指令

大家知道

<input v-model="value" >

父组件 

<div> 选择的结果是{{value}} 

1. <sue-optionResult v-model=“value” > </sue-optionResult>
2. </div>

1. <template>
2. <input :value="value" >
3. </template>
4. <script>
5. export defualt {
6. props: {
7. value:{}
8. }
9. }
10. </script>

slot内容分散器

<sue-vue> 我想显示 </sue-vue>

<slot></slot>

1. <sue-vue>
2. <sue-child > </sue-child>
3. </sue-vue>

1. <div>
2. <sue-option> <span>选项一</span> </sue-option>
3. </div>

1. <code class=“language-javascript”><sue></sue>   
2. <option></option>   
3. <slot><span>选项二</span></slot> </code>  

1. <sue></sue>
2. <option></option>
3. <slot><span>选项二</span></slot>

获取组件vue对象

获取子组件的vue对象 
在父组件挂载的时候，console.log(this.$children),可以查看子组件的vue 实例。当要获取子组件的数据的时候，可以使用。

同样的，获取父组件的vue对象 this.$parent，可以查看父元素的vue实例。

到这里，讲一个问题。在父组件使用 slot 分发内容容器，分发了一个组件，这个时候在slot 上用v-on 监听事件，分发的子组件是触发不了该事件的。 
如果这个时候通信怎么办呢？ 
1：用bus中间事件。来看一个例子

sue-select 组件模板如下：

这里的slot 内容，可以知道是 
这是sue-option组件，它和父组件sue-select 通信，通过在slot上绑定监听没有用，所以这里，用bus来中间通信。在sue-option用

bus.$emit('click-up',
{value: this.value});

所以，这个时候，其实我们希望的还是父子互相的通信。先说一个思路，子组件的获取它的父组件实例，给父组件实例添加触发事件，然后，只有这个父实例才能监听到。

this.$parent.$emit()

这样，你就算写100个，那也只会触发它父元素的那一个啊，同理，父元素给子元素触发事件·········