摘要:组件结构基础知识属性属性维护一个组件内部状态,其余组件正常情况下不可见。方案选择单文件一行的简单结构常规的选择前边两种方案解决不了时候的选择灵活性高注意不论选择哪一种方案,定义模板时,一定要有一个非标签元素作根,有且仅有一个。
简介
组件是可复用的 Vue 实例。
本质上是一个对象,该对象包含data、computed、watch、methods、filters以及生命周期钩子等成员属性。
组件结构:
{ data(){ return { // } }, computed:{ displayName(){ return ""; } }, methods:{ onClickHandler(params){ // do something } } }基础知识 data属性
data属性维护一个组件内部状态,其余组件正常情况下不可见。
可以通过props传递给子组件;
可以通过$emit的方式传递给父组件;
可以通过this.$refs.ref.$data在mounted生命周期内获取子组件的内部状态;
目前不知道如何监听其变化;
因为计算属性computed和侦听属性watch只能监听 响应式依赖 的变化,而$refs非响应式。
一个组件的 data 选项必须是一个函数。
data选项有两种定义方式: 一、对象形式: ``` data:{ //引用该组件的地方,共用一个状态的引用,以至于,只要有一处修改了$data中的某一属性值,其它引用该组件的地方也跟随着改变该属性值(其实,不是跟随,本来就是同一个指向)。 } ``` 二、函数形式: ``` data(){ return { //引用该组件的地方,每一个组件都会获得独立的引用,互不干扰。 } } ```computed属性 VS methods属性 VS filter
区别 | method | computed | filter |
---|---|---|---|
类型 | 函数 | 数据变量 | 函数 |
用途 | 作事件处理函数 | 作数据 | 作管道符 |
作用范围 | 组建内 | 组建内 | 组建内(局部注册)、全局(全局注册) |
参数 | 可以带参 | 不带参(非函) | 带参 |
返回值 | 不要求 | 必须有 | 必须有 |
触发 | 交互时触发 | 在它的相关依赖发生改变时才会重新求值 | 传入的数据变化时执行 |
注意:
Vue中并不是所有的属性都是响应式的,如$refs无法监听它的变动;
组件构建的主要区别在于模板的生成方式。
模板定义方式 template选项 字符串模板以HTML标签结构组成的字符串;
示例:
{ template: "id选择器指定的模板简单示例
", props: { level: { type: Number, required: true } } }
以id标识的一段script标签包裹的HTML片段;
示例:
{ template: "#anchored-heading-template", props: { level: { type: Number, required: true } } }render
发挥JavaScript最大的编程能力,该函数接收一个createElement方法作为第一个参数用来创建VNode;
createElement接收三个参数:组件根节点类型、组件配置对象、子节点(官方关于组件配置对象的说明);
示例:
{ render: function (createElement) { return createElement( "h" + this.level, // tag name 标签名称 this.$slots.default // 子组件中的阵列 ) }, props: { level: { type: Number, required: true } } }单文件组件
单文件组件将模板、逻辑、样式在结构上分离,保存在同一个文件中。
方案选择...
template | 单文件 | render |
---|---|---|
一行的简单结构 | 常规的选择 | 前边两种方案解决不了时候的选择(灵活性高) |
注意:
不论选择哪一种方案,定义模板时,一定要有一个非template标签元素作根DOM,有且仅有一个。
组件注册方式 局部注册以上几种方案定义的组件本质上都是一个对象,获取该对象(假设变量名为TabBar),要求只在另一个组件(假设变量名为App)内使用:
App组件的配置对象:
{ components:{ "tab-bar": TabBar, } }
这样就是局部注册,该组件TabBar只能在App模板中使用
以上几种方案定义的组件本质上都是一个对象,获取该对象(假设变量名为TabBar),要求项目内任何组件可使用:
一般在项目的入口文件(如:脚手架搭建项目的main.js)中:
Vue.component("tab-bar",TabBar);
这样就是全局注册,该组件TabBar能在整个项目内使用
以下用自己的语言将生命周期钩子表述一下,如果有不对的地方,请校正:
beforeCreate在这个时候,生命周期函数已经准备好。
组件实例已经构建,但本组件实例的数据、方法还没有注入;
可以在各个生命周期内通过组件实例this调用根实例上注入的$router、$store等对象。
可以在本生命周期内进行数据初始化;
created在这个时候,当前组件实例this上的属性($data、props、$methods...)已经注入绑定,可以调用本实例上的成员属性;
beforeMount在进入本生命周期之前,会进行以下判断:
是否有el选项(指定挂载目标):
有el选项的是根实例;
没有el选项的是非根实例(默认挂载元素为组件调用的位置);
是否有template选项:
有template选项的是内联模板;
没有template选项的是单文件组件;
个人觉得,还有render选项的判断;
最终这些模板都会转换为render函数进行渲染!!!
这个生命周期在解析模板,不知道有什么实际用途。
在本生命周期之前,已经将模板渲染为真实DOM,其中vm.$el为组件实例的根DOM元素;
本生命周期是初始化第三方插件的场所;
必要时候,可以在本生命周期内对DOM进行操作;
本生命周期是获取this.$refs.ref的场所;
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/96589.html
摘要:触发事件可以携带数据,这些数据被用于传递给绑定了事件的其它组件的回调函数上,进而被传递给其它组件。父组件可以在回调函数里做任何事情,颇有灵活性。一般情况下,父组件会在回调函数中更新自己的状态数据。 上一篇博文梳理了vue的数据驱动和响应式相关的特性,这一篇博文就来梳理vue的一个很重要的特性,组件化。自定义组件之于vue,其意义不亚于函数之于C,java之类的编程语言。函数是计算机科学...
摘要:事件总线事件总线首先创建了一个名为的空的实例然后全局定义了组件最后创建了实例。在父组件模板中,子组件标签上使用指定一个名称,并在父组件内通过来访问指定名称的子组件。 学习笔记:组件详解 组件详解 组件与复用 Vue组件需要注册后才可以使用。注册有全局注册和局部注册两种方式。 全局注册 Vue.component(my-component, {}); 要在父实例中使用这个组件,必须要...
阅读 3685·2021-09-23 11:32
阅读 2375·2021-09-06 15:01
阅读 1563·2021-08-18 10:24
阅读 3401·2019-12-27 11:44
阅读 3576·2019-08-30 15:52
阅读 2485·2019-08-30 11:11
阅读 637·2019-08-29 17:27
阅读 558·2019-08-29 16:22