(尚硅谷)Vue笔记--------------16

组件自定义事件_绑定

 

 

修改一下school组件的style:

再给student组件添加一个样式:

再给app一个样式:

 

最终页面效果： 

 我们现在想做的是，子组件给父组件传递信息：

在父组件中先定义一个函数:

然后在子组件去接收：

现在我们想完成同样的需求，我们把子组件的名称也传给父组件，但是我们不用之前那种方法，我们使用自定义组件的方法：

这种方式也可以完成子给父传递信息。

我们可以通过这种方式达到子组件给父组件传递信息。这种方式相比于第一种，我们不需要去在子组件中写props属性接收父组件的东西了，比较直接，相对更简单了。

我们还有另一种绑定的方法:

也可以通过这种方法，ref拿到子组件的vc对象，然后通过钩子函数获得触发的事件，进而向父组件传值。

 

我们这第二种写法比较麻烦，那它相比于第一种自定义组件的绑定方法有什么好处呢，这种写法更加的灵活，它可以做定时处理，3秒后再传递值，这种需求第一种方法就无法去实现。

 

我们也可以做这种需求就是我们只允许触发我们的事件一次：

 

用第一种方法也可以实现只绑定一次:

如果传递的数值比较多，怎么做呢？

我们可以这么写：

但是我们其实不会去这么写的：

我们可以把要传递的信息当成一个对象去传递。

我们比较多的是看成两个数组，一个是name一个是其它的信息，我们去使用可变参数:

组件自定义事件_解绑 

解绑自定义事件，不用就解绑了。

我们这里使用$off

那现在我们想解绑多个事件呢?

 

 

我们这么做一次性触发了两个绑定事件，显然不是像解绑单个事件那样去做了。

我们还有一种更暴力的写法:

 

 

 我们如果调用销毁函数，所有的自定义组件身上的绑定都会失效:

 

 

 

现在既有针对vm数据的操作也有针对vc数据的操作:

 

都可以使用。

 

当我们触发销毁方法:

 

针对vm对象的操作还是可以的，但是针对vc的就不行了，而且页面也不再渲染了。

组件自定义事件_总结 

我们现在是基于上一个代码的基础，我们这回是真的把绑定的名称在页面中显示，而不是在控制台中显示:

但是我们用插值语法打印出name，必须要在data,props,computed中存在才行，而这个name不在

父组件app的这三个区域中，怎么能把子组件的信息传递给父组件呢？

 

 如果我们用第二种绑定方法:

 

我们想这样回调的方式去做:

 

调用了方法，但是却没有渲染到页面中，是因为这种做法返回的this是绑定的student而不是app。所以拿不到值就无法渲染到页面中。

我们可以用箭头函数去做，箭头函数没有自己的this，它会去向外去找，就是vm，就可以了：

 

 

我们现在在我们的组件中使用原生的dom事件:

 

父给子传了一个click方法：

但是点击没用。

我们 要想使用就得变成自定义组件事件:

 

但是如果我们就不想把它变成自定义组件的，就想使用 原生的，vue也给我们提供了方法：

 

也是可以的。

总结: