Vue.js-资料-组件化思想 —上

Posted Pachulia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js-资料-组件化思想 —上相关的知识,希望对你有一定的参考价值。

一、Vue中的组件

 

Vue视图层的灵魂 —  组件化

技术分享图片

组件(Component)是 Vue.js 最强大的功能之一;

 

组件可以扩展 html 元素,封装可重用的代码;

 

在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。

 

二、全局组件的创建和注册

 

技术分享图片

 

案例代码:

 

技术分享图片

 

调用Vue.extend()创建的是一个组件构造器,构造器有一个选项对象,选项对象的template属性用于定义组件要渲染的HTML;

  

调用Vue.component()注册组件时,需要提供2个参数:组件的标签名 和 组件构造器;注册的组件要挂载到某个Vue实例下,否则它不会生效;

  

Vue.extend() 和 Vue.component():由于 Vue 本身是一个构造函数,Vue.extend() 是一个类继承方法,它用来创建一个 Vue 的子类并返回其构造函数;

  

而Vue.component() 的作用在于:建立指定的构造函数与 ID 字符串间的关系,从而让 Vue.js 能在模板中使用它;直接向 Vue.component() 传递 options 时,它会在内部调用 Vue.extend()。

 

三、局部组件的创建和注册

 

案例代码:

 

 

技术分享图片

 

运行结果:

 

技术分享图片

 

 

四、另一种组件创建和注册方式

 

直接通过Vue.component注册或获取全局组件,主要体现在以下几种方式:

 

// 注册组件,传入一个扩展过的构造器

Vue.component(‘my-component‘, Vue.extend({ /* ... */ }))

 

// 注册组件,传入一个选项对象(自动调用 Vue.extend)

Vue.component(‘my-component‘, { /* ... */ })

 

// 获取注册的组件(始终返回构造器)

var MyComponent = Vue.component(‘my-component‘) 

 

4.1  自定义全局组件

 

 

技术分享图片

 

4.2  自定义局部组件

 

技术分享图片


五、父子组件

 

      组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B 。

 

最简单的父子组件:

 

技术分享图片

 

运行结果:

 

技术分享图片

 

在父子组件组合使用中要注意以下一些问题:

 

没有实例化的子组件不能拿出来单独使用!

 

<div id="app">

       <parent-component></parent-component>

       <child-component></child-component>

</div>

 

 

在父标签内部嵌套子标签!

 

 

<div id="app">

       <parent-component>

           <child-component></child-component>

       </parent-component>

</div>

 

        因为在父标签一旦生成真实的DOM,其内部的子标签就会被解析成为普通的HTML标签来执行,而且<child-component>不是标准的HTML标签,会被浏览器过滤掉。

 

六、在组件上绑定Class和Style


       数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串。

        而且,把 v-bind 用于 class 和 style 时,表达式的结果类型除了字符串之外,还可以是对象或数组。

 

案例代码:

 

技术分享图片

 

七、template和script标签

 

       尽管在上面组件的组件注册的方式已经很简单,但是在template选项中拼接HTML的标签还是不符合常规的编程习惯,而且HTML元素和js代码混杂在一起造成了很大的耦合性。

 

 

       那么,template和script标签可以帮助我们将定义在JS中的HTML模板分离出来。

 

注意: 两种注册方式效果一样,官方建议用第一种。

 

(1)使用template标签注册组件:

 

技术分享图片

 

(2)使用script标签注册组件:

 

技术分享图片

 

注意:使用<script>标签时,type指定为text/x-template,意在告诉浏览器这不是一段js脚本,浏览器在解析HTML文档时会忽略<script>标签内定义的内容。

 

 

八、挂载选项data必须是函数

 

        使用组件时,大多数可以传入到 Vue 构造器中的选项可以在 Vue.extend() 或Vue.component()中注册组件时使用,但有一个重要前提: data 必须是函数

 

下面代码会出现的问题:

 

技术分享图片

 

代码运行结果: 

 

技术分享图片

 

正确的写法:

 

 Vue.component(‘my-component‘, {

        template: ‘#myTemplate‘,

        data: function () {

            return {

                message: ‘你好,中国‘

            }

        }

    })

 

代码运行结果:

 

技术分享图片

 

 注意:如果data选项指向某个对象,这意味着所有的组件实例共用一个data。

我们应当使用一个函数作为 data 选项,让这个函数返回一个新对象。

 

技术分享图片

 

 

运行结果,这三个组件共享了同一个 data , 因此增加一个 counter 会影响所有组件!

 

技术分享图片

 

 

解决办法:为每个组件返回新的 data 对象来解决这个问题!

 

data: function () {

            return {

                counter: 0

            }

        }

 

运行结果: 

 

 

技术分享图片



以上是关于Vue.js-资料-组件化思想 —上的主要内容,如果未能解决你的问题,请参考以下文章

vue.js学习笔记:什么是mvvm框架,vue.js的核心思想

Vue.js的组件化思想--下

Vue.js的组件化思想 —下

Vue.js - 使用 vuex 打开/关闭动态侧边栏思想不同的组件(导航栏到侧边栏)

vue-目录

vue.js核心思想