Vue.js详谈组件化

时间 2020-05-15 标签 vue.js vue 详谈组件

Vue.js详谈组件化

前面已经总结过：javascript

vue入门html

vue经常使用指令总结vue

在大型应用开发的时候，页面能够划分红不少部分。每每不一样的页面，也会有相同的部分。例如可能会有相同的头部导航java

可是若是每一个页面都独自开发，这无疑增长了咱们开发的成本。因此咱们会把页面的不一样部分拆分红独立的组件，而后在不一样页面就能够共享这些组件，避免重复开发web

在vue里，全部的vue实例都是组件npm

文章目录

Vue.js详谈组件化

全局组件

咱们经过Vue的component方法来定义一个全局组件数组

定义一个组件以下：数据结构

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    // 定义全局组件，两个参数：1，组件名称。2，组件参数
    Vue.component("counter",{
        template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',
        data(){
            return {
                count:0
            }
        }
    })
    var app = new Vue({
        el:"#app"
    })
</script>

html代码：app

<body>
<div id="app">
  <!--使用定义好的全局组件-->
  <counter></counter>
</div>
</body>

效果：less

在任何地方你均可以放置这个组件，只要你带着惟一的组件名，本例中参数名就为counter

组件其实也是一个Vue实例，所以它在定义时也会接收：data、methods、生命周期函数等
不一样的是组件不会与页面的元素绑定，不然就没法复用了，所以没有el属性。
可是组件渲染须要html模板，因此增长了template属性，值就是HTML模板
全局组件定义完毕，任何vue实例均可以直接在HTML中经过组件名称来使用组件了。
data必须是一个函数，再也不是一个对象。

组件复用

<div id="app">
    <!--使用定义好的全局组件-->
    <counter></counter>
    <counter></counter>
    <counter></counter>
</div>

局部组件

一旦全局注册，就意味着即使之后你再也不使用这个组件，它依然会随着Vue的加载而加载，这样会形成网页加载速度延迟

所以，对于一些并不频繁使用的组件，咱们会采用局部注册

咱们先在外部定义一个对象，结构与建立组件时传递的第二个参数一致：

const counter = {
    template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',
    data(){
        return {
            count:0
        }
    }
};

而后在Vue实例中使用它：

var app = new Vue({
    el:"#app",
    components:{
        counter:counter // 将定义的对象注册为组件
    }
})

components就是当前vue对象子组件集合。
- 其key就是子组件名称
- 其值就是组件对象名
效果与刚才的全局注册是相似的，不一样的是，这个counter组件只能在当前的Vue实例中使用

组件通讯

一般一个单页应用会以一棵嵌套的组件树的形式来组织：

页面首先分红了顶部导航、左侧内容区、右侧边栏三部分
左侧内容区又分为上下两个组件
右侧边栏中又包含了3个子组件

各个组件之间以嵌套的关系组合在一块儿，那么这个时候不可避免的会有组件间通讯的需求

props（父向子传递）

父组件使用子组件时，自定义属性（属性名任意，属性值为要传递的数据）
子组件经过props接收父组件数据，经过自定义属性的属性名

**例子：**父组件使用子组件，并自定义了title属性：

<body>
<div id="app">
  <h1>打个招呼：</h1>
  <!--父组件使用子组件，同时传递title属性，本例中子组件会对title作渲染-->
  <introduce title="你们好，我是Junsir"/>
</div>
</body>

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript"> Vue.component("introduce",{ // template:'<<h2>{{title}}</h2>', // 直接使用props接收到的属性来渲染页面 props:['title'] //使用props来接收一个父组件传递的属性 }) var app = new Vue({ el:"#app" }) </script>

props验证

咱们定义一个子组件，并接收复杂数据：

const myList = {
        template: '\ <ul>\ <li v-for="item in items" :key="item.id">{{item.id}} : {{item.name}}</li>\ </ul>\ ',
        props: { //接收item对象
            items: {
                type: Array,
                default: [],
                required: true
            }
        }
    };

这个子组件能够对 items 进行迭代，并输出到页面。

props：定义须要从父组件中接收的属性

items：是要接收的属性名称

type：限定父组件传递来的必须是数组

default：默认值

required：是否必须

当 prop 验证失败的时候，Vue 将会产生一个控制台的警告

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <h2>课程：</h2>
  <!-- 使用子组件的同时，传递属性，这里使用了v-bind，指向了父组件本身的属性lessons -->
  <my-list :items="lessons"/>
</div>
</body>

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript"> //定义子组件 const myList = { //渲染模板 template: '\ <ul>\ <li v-for="item in items" :key="item.id">{{item.id}} : {{item.name}}</li>\ </ul>\ ', props: { //接收item对象 items: { type: Array, //接收数组 default: [], //props验证 required: true //props验证 } } }; var app = new Vue({ el:"#app", components:{ myList // 子组件 当key和value同样时，能够只写一个 }, data:{ lessons:[ {id:1, name: 'java'}, {id:2, name: '操做系统'}, {id:3, name: '数据结构'}, ] } }) </script>
</html>

type类型能够有：String Number Boolean Array Object Date Function Symbol

动态静态传递

给 prop 传入一个静态的值：

<introduce title="你们好，我Junsir"/>

给 prop 传入一个动态的值：（经过v-bind从数据模型中，获取title的值）

<introduce :title="title"/>

静态传递时，咱们传入的值都是字符串类型的，但实际上任何类型的值均可以传给一个 props

子向父通讯（semit）

子组件接收到父组件属性后，默认是不容许修改的。怎么办？

既然只有父组件能修改，那么加和减的操做必定是放在父组件：

可是，点击按钮是在子组件中，那就是说须要子组件来调用父组件的函数，怎么作？

咱们能够经过v-on指令将父组件的函数绑定到子组件上：

<div id="app">
  <h2>num: {{num}}</h2>
  <counter :count="num" @inc="increment" @dec="decrement"></counter>
</div>

在子组件中定义函数，函数的具体实现调用父组件的实现，并在子组件中调用这些函数。当子组件中按钮被点击时，调用绑定的函数：

Vue.component("counter", {
            template:'\ <div>\ <button @click="plus">加</button> \ <button @click="reduce">减</button> \ </div>',
            props:['count'],
            methods:{
                      //vue提供了一个内置的this.$emit()函数，用来调用父组件绑定的函数
                plus(){
                    this.$emit("inc");
                },
                reduce(){
                    this.$emit("dec");
                }
            }
        })
        
    var app = new Vue({
    el:"#app",
    data:{
      num:0
    },
    methods:{ // 父组件中定义操做num的方法——加与减
      increment(){
        this.num++;
      },
      decrement(){
        this.num--;
      }
    }
  })

效果：