必威体育Betway必威体育官网
当前位置:首页 > IT技术

vue-component

时间:2019-07-23 19:13:14来源:IT技术作者:seo实验室小编阅读:87次「手机版」
 

component

vue-component

vue组件简介

组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树

All text

什么是组件

组件可以扩展HTML元素,封装可重用的HTML代码,可以将组件看作自定义的HTML元素。

组件的创建和注册

基本步骤

Vue.js的组件的使用有3个步骤:创建组件构造器、注册组件和使用组件

All text

示例

component.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="src/assets/logo.png" />
        <title>vue-simple-demo</title>
    </head>
    <body>
      <p id="component-test">
        <!-- 3.#component-test是Vue实例挂载的元素,应该在挂载元素范围内使用组件 -->
        <matrix-component></matrix-component>
      </p>
    </body>
    <script src="/dist/build.js"></script>
</html>

src/main.js

import Vue from 'vue'

// 1.创建一个组件构造器
var myComponent = Vue.extend({
  template: '<p style="font-family:微软雅黑;">This is matrix first component</p>'
})

// 2.注册组件,并指定组件的标签,组件的HTML标签为<my-component>
Vue.component('matrix-component',myComponent)

// 3.创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
new Vue({
    el: '#component-test',
})

运行示例

npm run dev

发布

npm run build

运行结果

使用组件和使用普通的HTML元素没什么区别

All text

理解组件的创建和注册

1. Vue.extend()是Vue构造器的扩展,调用Vue.extend()创建的是一个组件构造器
2. Vue.extend()构造器有一个选项对象,选项对象的template属性用于定义组件要渲染的HTML
3. 使用Vue.component()注册组件时,需要提供2个参数,第1个参数时组件的标签,第2个参数是组件构造器
4. 组件应该挂载到某个Vue实例下,否则它不会生效

注意点:以下代码在3个地方使用了标签,但只有#component-test1和#component-test2下的标签才起到作用

component.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="src/assets/logo.png" />
        <title>vue-simple-demo</title>
    </head>
    <body>
      <p id="component-test1">
        <!-- 3.#component-test是Vue实例挂载的元素,应该在挂载元素范围内使用组件 -->
        <matrix-component></matrix-component>
      </p>

      <p id="component-test2">
        <!-- 3.#component-test是Vue实例挂载的元素,应该在挂载元素范围内使用组件 -->
        <matrix-component></matrix-component>
      </p>

      <!--该组件不会被渲染-->
      <my-component></my-component>
    </body>
    <script src="/dist/build.js"></script>
</html>

src/main.js

import Vue from 'vue'

// 1.创建一个组件构造器
var myComponent = Vue.extend({
  template: '<p style="font-family:微软雅黑;">This is matrix component</p>'
})

// 2.注册组件,并指定组件的标签,组件的HTML标签为<my-component>
Vue.component('matrix-component',myComponent)

// 3.创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
var component1 = new Vue({
    el: '#component-test1',
})

var component2 = new Vue({
    el: '#component-test2',
})

运行示例&发布

npm run dev
npm run build

运行结果

All text

全局注册和局部注册

调用Vue.component()注册组件时,组件的注册是全局的,这意味着该组件可以在任意Vue示例下使用
如果不需要全局注册,或者是让组件使用在其它组件内,可以用选项对象的components属性实现局部注册

上面的示例可以改为局部注册的方式

local_component.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="src/assets/logo.png" />
        <title>vue-simple-demo</title>
    </head>
    <body>

      <p id="local_component">
        <!-- #local-component是Vue实例挂载的元素,应该在挂载元素范围内使用组件 -->
        <local-component></local-component>
      </p>

    </body>
    <script src="/dist/build.js"></script>
</html>

src/main.js

import Vue from 'vue'

// 1.创建一个组件构造器
var localComponent = Vue.extend({
  template: '<p style="font-family:微软雅黑;">This is matrix local component</p>'
})

var local_component = new Vue({
    el: '#local_component',
    components: {
      // 2. 将localComponent组件注册到Vue实例下
      'local-component' : localComponent
    }
})

运行示例&发布

npm run dev
npm run build

运行结果

All text

父组件、子组件

cmd/parent.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="../src/assets/logo.png" />
        <title>父组件、子组件</title>
        <style type="text/css">
          *{
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
          }
          #parent_data{
            width: 50%;
            margin:100px auto;
          }
        </style>
    </head>
    <body>
        <!--View-->
        <p id="parent_data">
            <parent-component></parent-component>
        </p>
    </body>
    <script src="../dist/build.js"></script>
</html>

注意:vue2.0要求每个template只能有一个根元素

src/main.js

import Vue from 'vue'

// 父组件、子组件
var Child = Vue.extend({
  template: '<p>This is child component!</p>'
})

var Parent = Vue.extend({
  // 在Parent组件内使用<child-component>标签
  template:'<p><p>This is a Parent component</p><child-component></child-component></p>',
  components: {
    // 局部注册Child组件,该组件只能在Parent里使用
    'child-component': Child
  }
})

// 全局注册Parent组件
Vue.component('parent-component',Parent)

// 注册Vue实例
new Vue({
  el:'#parent_data'
})
var Child = Vue.extend(...)定义了Child组件构造器
var Parent = Vue.extend(...)定义了Parent组件构造器
components: { 'child-component': Child },将Child组件注册到Parent组件,并将Child组件的标签设置为child-component
template :'<p>This is a Parent component</p><child-component></child-component>',在Parent组件内以标签的形式使用Child组件
Vue.component('parent-component', Parent) 全局注册Parent组件
在页面中使用<parent-component>标签渲染Parent组件的内容,同时Child组件的内容也被渲染出来

All text

Child组件是在Parent组件中注册的,它只能在Parent组件中使用,确切地说:子组件只能在父组件的template中使用
请注意下面两种子组件的使用方式是错误的:

以子标签的形式在父组件中使用

<p id="APP">
    <parent-component>
        <child-component></child-component>
    </parent-component>
</p>
为什么这种方式无效呢?

因为当子组件注册到父组件时,Vue会编译好父组件的模板,模板的内容已经决定了父组件将要渲染的HTML

<parent-component>…</parent-component>相当于运行时,它的一些子标签只会被当作普通的HTML来执行
<child-component></child-component>不是标准的HTML标签,会被浏览器直接忽视掉

在父组件标签外使用子组件

<p id="app">
    <parent-component>
    </parent-component>
    <child-component>
    </child-component>
</p>
运行这段代码,浏览器会提示错误

运行示例&发布

npm run dev
npm run build

运行结果

All text

组件注册语法糖

以上组件注册的方式有些繁琐,Vue为了简化这个过程,提供了注册语法糖

使用Vue.component()直接创建和注册组件

// 全局注册,my-component是标签名称
Vue.component('my-component',{
    template: '<p>This is the first component!</p>'
})

var vm1 = new Vue({
    el: '#app'
})
Vue.component()的第1个参数是标签名称,第2个参数是一个选项对象,

使用选项对象的template属性定义组件模板

使用这种方式,Vue在背后会自动地调用Vue.extend()

在选项对象的components属性中实现局部注册

var vm2 = new Vue({
    el: '#app2',
    components: {
        // 局部注册,my-component2是标签名称
        'my-component2': {
            template: '<p>This is the second component!</p>'
        },
        // 局部注册,my-component3是标签名称
        'my-component3': {
            template: '<p>This is the third component!</p>'
        }
    }
})

使用script或template标签

尽管语法糖简化了组件注册,但在template选项中拼接HTML元素比较麻烦,这也导致了HTML和javaScript的高耦合性
庆幸的是,Vue提供了两种方式将定义在JavaScript中的HTML模板分离出来

使用script标签

cmd/script.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="../src/assets/logo.png" />
        <title>使用Script标签</title>
        <style type="text/css">
          *{
            margin: 0;
            padding: 0;
            font-size: 16px;
            font-family: "微软雅黑";
          }
          #script_data{
            width: 50%;
            margin:100px auto;
          }
        </style>
    </head>
    <body>
        <!--View-->
        <p id="script_data">
            <content-component></content-component>
        </p>

        <script type="text/x-template" id="contentComponent">
            <p>This is a component!</p>
        </script>
    </body>
    <script src="../dist/build.js"></script>
</html>

src/main.js

import Vue from 'vue'

// 使用script语法,分离在Js中的HTML
// 全局注册组件
Vue.component('content-component',{
  template: '#contentComponent'
})

// 注册Vue实例
new Vue({
  el: '#script_data'
})
template选项现在不再是HTML元素,而是一个id,Vue根据这个id查找对应的元素,然后将这个元素内的HTML作为模板进行编译

运行示例&发布

npm run dev
npm run build

运行结果

All text

组件的el和data选项

传入Vue构造器的多数选项也可以用在 Vue.extend()或Vue.component()中

不过有两个特例:data和el

Vue规定:在定义组件的选项时,data和el选项必须使用函数

下面的代码在执行时,浏览器会提出一个错误
Vue.component('my-component', {
    data: {
        a: 1
    }
})

All text

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

我们应当使用一个函数作为 data 选项,让这个函数返回一个新对象
Vue.component('my-component', {
    data: function(){
        return {a : 1}
    }
})

使用props

组件实例的作用域是孤立的
这意味着不能并且不应该在子组件的模板内直接引用父组件的数据
可以使用 props 把数据传给子组件

父组件是如何将数据传给子组件的?

All text

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>component props</title>
    <link rel="shortcut icon" href="../src/assets/logo.png" />
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
    <style type="text/css">
    </style>
</head>
<body>

  <!-- 将父组件数据通过已定义好的props属性传递给子组件 -->
  <p id="app">
      <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
  </p>
  <template id="myComponent">
      <!-- <Table border :columns="columns1" :data="data1"></Table> -->
      <table>
          <tr>
              <th colspan="2">
                子组件数据
              </th>
          </tr>
          <tr>
              <td>my name</td>
              <td>{{ myName }}</td>
          </tr>
          <tr>
              <td>my age</td>
              <td>{{ myAge }}</td>
          </tr>
      </table>
  </template>

  <script>
      // 组件实例的作用域是孤立的,这意味着不能并且不应该在子组件的模板内直接引用父组件的数据,可以使用props把数据传给子组件
      var vm = new Vue({
        el: '#app',
        data: {
          name: 'matrix',
          age: 23
        },
        components: {
          'my-component': {
            template: '#myComponent',
            props: ['myName','myAge']
          }
        }
      })
  </script>
</body>
</html>

运行示例

All text

prop的绑定类型

单向绑定

既然父组件将数据传递给了子组件,那么如果子组件修改了数据,对父组件是否会有所影响呢?

我们将子组件模板和页面HTML稍作更改

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>component props</title>
    <link rel="shortcut icon" href="../src/assets/logo.png" />
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
        font-size: 16px;
        font-family: '微软雅黑';
    }
    #app {
        margin: 100px auto;
        max-width: 480px;
    }
    table, td, th {
        border-collapse: collapse;
        border-spacing: 0;
    }
    td, th {
        border: 1px solid #bcbcbc;
        padding: 10px 35px;
    }
    th {
      background: #42b983;
      font-weight: 400;
      color: #fff;
      cursor: pointer;
    }
    </style>
</head>
<body>
  <p id="app">
      <table>
          <tr>
              <th colspan="3">父组件数据</td>
          </tr>
          <tr>
              <td>name</td>
              <td>{{ name }}</td>
              <td><input type="text" v-model="name" /></td>
          </tr>
          <tr>
              <td>age</td>
              <td>{{ age }}</td>
              <td><input type="text" v-model="age" /></td>
          </tr>
      </table>

      <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
  </p>

  <template id="myComponent">
      <table>
          <tr>
              <th colspan="3">子组件数据</td>
          </tr>
          <tr>
              <td>my name</td>
              <td>{{ myName }}</td>
              <td><input type="text" v-model="myName" /></td>
          </tr>
          <tr>
              <td>my age</td>
              <td>{{ myAge }}</td>
              <td><input type="text" v-model="myAge" /></td>
          </tr>
      </table>
  </template>

  <script>
    // 组件实例的作用域是孤立的,这意味着不能并且不应该在子组件的模板内直接引用父组件的数据,可以使用props把数据传给子组件
    var vm = new Vue({
      el: '#app',
      data: {
        name: 'matrix',
        age: 23
      },
      components: {
        'my-component': {
          template: '#myComponent',
          props: ['myName','myAge']
        }
      }
    })
  </script>
</body>
</html>
props默认是单向绑定:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意修改了父组件的状态

双向绑定

可以使用.sync显式地指定双向绑定,这使得子组件的数据修改会回传给父组件
<my-component v-bind:my-name.sync="name" v-bind:my-age.sync="age"></my-component>

单次绑定

可以使用.once显式地指定单次绑定,单次绑定在建立之后不会同步之后的变化,这意味着即使父组件修改了数据,也不会传导给子组件
<my-component v-bind:my-name.once="name" v-bind:my-age.once="age"></my-component>

相关阅读

分享到:

栏目导航

推荐阅读

热门阅读