vue 组件

什么是组件：组件是可复用的vue实例，它的特点是独立、可复用且整体化。

为什么要组件化：为了实现功能模块的复用，高执行率，便于开发单页面复杂应用。

组件化带来的问题：组件状态管理（vuex）；

多组件的混合使用，多页面，复杂逻辑（vue-router）；

组件间的传参、消息、事件处理（props，emit/on，bus）。

下面，我们来看看怎么创建组件以及使用组件，先注册组件：Vue.component('componentName',{data:...,template:...})，componentName是你的组件名称，data是组件的数据，切记data必须是一个函数，如果data只是一个对象，那我们在复用组件到的时候，组件和组件之间的数据是会受到彼此的影响的，template则是我们要建立的DOM模板内容。然后我们需要在哪里使用到这个组件，就把组件名当标签使用在html里就可以来，我们来看一个小栗子：

前文提到的vuex，后面的文章会单独将，它一种响应式的状态管理，很重要，需要单独来说。现在，我们看一下组件之间的通信，vue通过prop向子组件传递数据。看下下面的例子：

如果我们需要给子组件添加事件，达到父子组件进行沟通的效果，应该怎么来实现呢，这就需要用到$emit 方法，这个方法第一个传入一个事件名称，这个事件名称，我们能在父组件获取并控制，后面还何以传入其他参数，具体使用方法，可以看下官方文档哈，我这里没用就不说了。下面说个例子，我们在看小说的时候，有时候会用到放大字体或者缩小字体的功能，这里我们就通过给子组件添加两个按钮来实现一下这个功能：

除了上面我们说到的知识点，组件还有其他的知识点，我这里就先不说了，以后用到再补充吧，上面是组件基本的使用方法。

Vue

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。