龙空技术网

vue如何使用组件

IT小超 216

前言:

今天你们对“vue组件用法”都比较注重,同学们都想要学习一些“vue组件用法”的相关知识。那么小编在网上搜集了一些对于“vue组件用法””的相关内容,希望同学们能喜欢,小伙伴们快快来学习一下吧!

vue组件是开发中常用的东西,当我们的页面内容足够多的时候,就需要利用组件来分解各个功能模块。

组件是一个个可复用的独立的ui模块,它是一个Vue实例,所以它们与new Vue接受相同的选项,data、computed、watch、methods、生命周期钩子都有。但是除el之外,因为最终所有组件都会被插入到根实例中去。

全局组件:Vue.component(name,Object)注册全局组件

全局组件可以作为一个自定义元素,用在任何(通过new Vue)新建的Vue根实例的模板中,也可用在子组件的模板中。

全局组件个人理解就像一个螺丝钉一样,根实例模板或子组件模板就像一个机器,这个螺丝钉可以拧在机器里边的任何一个部位上。

局部组件:

我总结了三个步骤:

创建组件(定义一个局部组件) ————————> 注册组件(组件名写在根实例(父组件)components对象中)——————> 使用组件(自定义标签定义在根实例的模板或者父组件的模板中)

上边代码,局部组件模板中用到name数据,它不会去找根实例中的name数据,也拿不到,(当然通过组件间传值可实现父子组件数据通信)。

局部组件在其子组件中不可用,当然如果你非要用,需这样写:(组件A在组件B里边定义,需把A组件注册在组件B里边)

或用ES6中的export default和import导出和引入一个模块:(在vue-cli中你会经常使用到)

最后再来一个局部组件在子组件中使用的小demo:(孙子组件用在儿子组件里边)

组件其实很简单,也很好理解,但平常我们用的很多,欢迎大家讨论

标签: #vue组件用法 #vue组件选项