VUE组件(上)分分快三计划

作者:分分快三计划

 注意事项:

  1. 万一运用 Vue.component 注册组件的时候,组件名称使用了驼峰命名,则在引用组件的时候,须求把大写的驼峰改为小写的假名,同不日常候,四个单词之间使用 “-” 连接
  2. 假设不采取驼峰,则一直拿名称来使用就能够;
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <div id="app">
      <my-component></my-component>
    </div>

    <template id="myComponent">
      <div>This is a component!</div>
    </template>
  </body>
  <script src="js/vue.js"></script>
  <script>

    Vue.component('my-component',{
      template: '#myComponent'
    })

    new Vue({
      el: '#app'
    })

  </script>
</html>

1. 以子标签的款型在父组件中选用

奉行结果:

分分快三计划 1

本身的博客就要搬运六头至Tencent云 社区,诚邀大家一起入驻:

使用<template>标签

1.Vue.extend()是Vue构造器的扩展,调用Vue.extend()成立的是一个零件构造器。

利用Vue.extend来创立全局vue组件:

var com1 = Vue.extend({
template: '<h3>这是使用 Vue.extend 创建的组件</h3>' // 通过template属性,指定了组件要展示的HTML结构
})

prop的绑定类型

分分快三计划 2

 为什么组件中的data必需借使八个办法,演示如下:

Html代码:

  <div id="app">
    <counter></counter>
    <hr>
    <counter></counter>
    <hr>
    <counter></counter>
  </div>
  <template id="tmpl">
    <div>
      <input type="button" value=" 1" @click="increment">
      <h3>{{count}}</h3>
    </div>
  </template>

javascript代码:

    var dataObj = { count: 0 }
    //这是一个计数器的组件, 身上有个按钮,每当点击按钮,让data中的count值 1
    Vue.component('counter', {
      template: '#tmpl',
      data: function () {
        // return dataObj
        return { count: 0 }
      },
      methods: {
        increment() {
          this.count  
        }
      }
    })
    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });

调用测量检验结果如下 :

分分快三计划 3

各类计数器的count是单独的,如将将重临的值改为:

        return dataObj
        //return { count: 0 }

结果为:

分分快三计划 4

每一种组件的count是分享的,组件的data必需是叁个方法,且必需回到二个目的。要化解的标题正是提升组件的复用性,幸免组件与组件之间成员干扰。

分分快三计划 5

是因为my-component组件是挂号在#app元素对应的Vue实例下的,所以它无法在其余Vue实例下选拔。

Vue.js 组件

  • 模块化:是从代码逻辑的角度进行私分的;
  • 组件化:是从UI分界面包车型地铁角度举行分割的。

组件(Component)是 Vue.js 最强盛的职能之一,组件能够增添 HTML 成分,封装可选拔的代码。

组件系统让大家能够用独立可复用的小组件来营造大型应用,大约大肆档案的次序的选用的分界面都足以抽象为贰个零部件树,如下图所示:

分分快三计划 6

为何这种措实行不通呢?因为当子组件注册到父组件时,Vue.js会编译好父组件的模版,模板的内容早就调控了父组件就要渲染的HTML。

props: {    data:Array,    columns:Array,    filterKey:String}

只顾:不论是哪一种格局开再次创下来的机件,组件的 template 属性指向的模板内容,必得有且不得不有独一的贰个根元素

假如大家想使父组件的数目,则必需先在子组件中定义props属性,也便是props: ['myName', 'myAge']那行代码。

// 全局注册,my-component1是标签字称Vue.component('my-component1',{    template:'

子组件援用父组件的值:

 1     <div id="app">
 2         <com1></com1>
 3     </div>
 4     <script>
 5 
 6             Vue.component
 7             var vm = new Vue({
 8                 el:'#app',
 9                 data:{
10                     msg:"heelo !"
11                 },
12                 methods:{
13                 },
14                 components:{
15                     com1:{
16                         template:'<h1>这是子组件---{{msg}}</h1>'
17                     }
18                 }
19             })
20         </script>

实行结果:

分分快三计划 7

暗中同意情形下子组件是不能援引父组件的个性和对象的,我们得以在引用子组件的时候,通过品质绑定的款型(v-bind)的款型,把要求传递给子组件的数量,以属性绑定的格局传递到子组件内部,供子组件使用,何况在props中宣示该属性(props中的数据都以通过父组传递过来的,这里的多少是只读的),代码如下:

 1     <div id="app">
 2         <com1 v-bind:parentmsg="msg"></com1>
 3     </div>
 4     <script>
 5         Vue.component
 6         var vm = new Vue({
 7             el: '#app',
 8             data: {
 9                 msg: "heelo !"
10             },
11             methods: {
12             },
13             components: {
14                 data() {
15                     return {
16                         title: '123',
17                         content: 'pppp'
18                     }
19                 },
20                 com1: {
21                     props: ['parentmsg'],
22                     template: '<h1>这是子组件---{{parentmsg}}</h1>'
23                 }
24             }
25         })
26     </script>
<div id="app2">
  <!-- 不能使用my-component组件,因为my-component是一个局部组件,它属于#app-->
  <my-component></my-component>
</div>

<script>
  new Vue({
    el: '#app2'
  });
</script>

请留神第4点,以下代码在3个地方使用了标签,但唯有#app1和#app2下的竹签才起到效果。

 私有组件:

  <template id="tmpl2">
    <h1>这是私有的 login 组件</h1>
  </template>

    var vm2 = new Vue({
      el: '#app2',
      components: { // 定义实例内部私有组件的
        login: {
          template: '#tmpl2'
        }
      },
    })

鉴于组件的字数极大,笔者将会把组件的入门知识分为两篇来上课,那样也惠及各位看官们快速消食。

(全部示例都投身GitHub Pages上了,请访谈https://github.com/keepfool/vue-tutorials查看示例汇总)

组件的切换:

<body>
  <div id="app">
    <a href="" @click.prevent="flag=true">登录</a>
    <a href="" @click.prevent="flag=false">注册</a>
    <login v-if="flag"></login>
    <register v-else="flag"></register>
  </div>
  <script>
    Vue.component('login', {
      template: '<h3>登录组件</h3>'
    })
    Vue.component('register', {
      template: '<h3>注册组件</h3>'
    })
    var vm = new Vue({
      el: '#app',
      data: {
        flag: true
      },
      methods: {}
    });
  </script>
</body>

演示结果如下,暗中认可展现登入组件,点击注册切换到注册组件,点击登入切换的记名组件。

分分快三计划 8

 

 

 

劣势深入分析:假设在三个急需中供给切换愈来愈多的机件,这种方法不便利增加。

    <!-- Vue提供了component ,来展现对应名称的机件 -->

    <!-- component 是叁个占位符, “:is”是性质,能够用来钦赐要出示的零件的称谓 -->

  <div id="app">
    <a href="" @click.prevent="comName='login'">登录</a>
    <a href="" @click.prevent="comName='register'">注册</a>
    <component :is="comName"></component>
  </div>
  <script>
    // 组件名称是字符串
    Vue.component('login', {
      template: '<h3>登录组件</h3>'
    })
    Vue.component('register', {
      template: '<h3>注册组件</h3>'
    })
    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        comName: 'login' //当前component中的 :is 绑定的组件的名称
      },
    });
  </script>

组件注册语法糖

View Demo

组件的调用: 

  <div id="app">
    <!-- 如果要使用组件,直接把组件的名称以HTML标签的形式,引入到页面中即可 -->
    <my-com1></my-com1>
  </div>
<!DOCTYPE html>
<html>
  <body>
    <div id="app">
      <parent-component>
      </parent-component>
    </div>
  </body>
  <script src="js/vue.js"></script>
  <script>

    var Child = Vue.extend({
      template: '<p>This is a child component!</p>'
    })

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

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

    new Vue({
      el: '#app'
    })

  </script>
</html>

分分快三计划 9

那时只是申明了多少个叫com1的机件,如若要在vue实例中使用组件,还索要通过以下措施来注册组件:

   Vue.component('myCom1', com1)

运作那么些页面,我们做三个小规模试制验:

  1. 零件应该挂载到某些Vue实例下,不然它不会生效。

其他三种创立组件的方法:

    Vue.component('myCom1', Vue.extend({
      template: '<h3>这是使用Vue.extend创建的组件</h3>'
    }))

    Vue.component('mycom2', {
      template: '<div><h3>这是直接使用Vue.component创建出来的组件</h3>123</div>'
    })

能够使用.sync显式地内定双向绑定,这使得子组件的数额修改会回传给父组件。

使用props

子组件调用父组件的章程:

请详细看上面代码中的注释

 1  <div id="app">
 2      
 3     <com2 @func="show"></com2>
 4     </div>
 5     <template id="tmpl">
 6         <div>
 7             <h1>这是子组件</h1>
 8             <input type="button" value="这是子组件中的点击按钮" @click="myclick">
 9         </div>
10     </template>
11     <script>
12         //定义了一个字面量类型的组件模板对象
13         var com2 = {
14             template: '#tmpl',
15             data() {
16                 return {
17                     sonmsg: { name: 'wjl', age: 16 }
18                 }
19             },
20             methods: {
21                 myclick() {
22                     //当点击子组件的按钮时,通过$emit拿到父组件传递过来的func
23                     //emit的英文愿意为触发、调用、发射的意思
24                     this.$emit('func', this.sonmsg, 123, 456)
25                 }
26             }
27         }
28         var vm = new Vue({
29             el: '#app',
30             data: {
31                 datamsg: null
32             },
33             methods: {
34                 show(data, data1, data2) {
35                     console.log('调用了父组件的show方法:'   data.name   data1   data2);
36                 }
37             },
38             components: {
39                 com2
40             }
41         })
42     </script>

分分快三计划 10

my age{{ myAge }}

在被调控的#app外面,使用template成分,定义组件的HTML模板结构:

  <template id="tmpl">
    <div>
      <h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的智能提示和语法高亮</h1>
    </div>
  </template>

   Vue.component('mycom3', {
      template: '#tmpl' //引用template的id属性
    })

2. Vue.extend()构造器有三个挑选另一半,选项对象的template属性用于定义组件要渲染的HTML。

分分快三计划 11

零件切换动画:

html代码:

  <div id="app">
    <a href="" @click.prevent="comName='login'">登录</a>
    <a href="" @click.prevent="comName='register'">注册</a>

    <!-- 通过 mode 属性,设置组件切换时候的模式为先出后进-->
    <transition mode="out-in">
      <component :is="comName"></component>
    </transition>

  </div>

  <script>
    // 组件名称是 字符串
    Vue.component('login', {
      template: '<h3>登录组件</h3>'
    })

    Vue.component('register', {
      template: '<h3>注册组件</h3>'
    })
    var vm = new Vue({
      el: '#app',
      data: {
        comName: 'login' // 当前 component 中的 :is 绑定的组件的名称
      },
    });
  </script>

css代码:

  <style>
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(150px);
    }

    .v-enter-active,
    .v-leave-active {
      transition: all 0.5s ease;
    }
  </style>
Vue.component('my-component', {
  data: function(){
    return {a : 1}
  }
})

能够见到,使用组件和应用普通的HTML成分没什么差别。

零件中的data和methods:

  1. 零件能够有温馨的data数据;
  2. 零件的data和实例的data有一点点不一样等,实例中的data可以为贰个目的,可是组件中的data必得是二个主意;
  3. 组件中的data除了必须为三个方法之外,这么些办法内部还非得回到二个指标;
  4. 零件中的data数据,使用办法和实例中的data使用格局完全同样

    Vue.component('mycom1', {
      template: '<h1>这是全局组件 --- {{msg}}</h1>',
      data: function () {
        return {
          msg: '这是组件的中data定义的数据'
        }
      }
    })
    

为了尽快消化吸取这个知识,我们来做二个小示例吧。

大家将子组件模板和页面HTML稍作改造:

  1. 在页面上修改子组件的数量

父组件数据

以上组件注册的秘籍有一些麻烦,Vue.js为了简化那一个进度,提供了注册语法糖。

这段代码的运维结果如下:

使用props

template :'

定义子组件的HTML模板:

示例

为了方便驾驭,你能够将那些Vue实例看作my-component的父组件。

组件的el和data选项

譬如不必要全局注册,大概是让组件使用在别的组件内,能够用选项对象的components属性实现部分注册。

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

props: {
  data: Array,
  columns: Array,
  filterKey: String
}

2.Vue.extend()构造器有二个取舍对象,选项对象的template属性用于定义组件要渲染的HTML。

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

This is a component!

零件简要介绍

比如没有供给全局注册,或然是让组件使用在任何组件内,能够用慎选另一半的components属性落成部分注册

template选项现行不再是HTML成分,而是八个id,Vue.js依据那些id查找对应的因素,然后将以此因素内的HTML作为模板进行编译。

假定您这么做了,浏览器会提醒一个荒唐:

我们应有选用三个函数作为 data 选项,让这些函数重回贰个新对象:

何以这种方式行不通呢?因为当子组件注册到父组件时,Vue.js会编写翻译好父组件的模版,模板的内容已经决定了父组件将要渲染的HTML。

精通组件的成立和登记

分分快三计划 12

<!DOCTYPE html>
<html>
  <body>
    <div id="app">
      <!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使用组件-->
      <my-component></my-component>
    </div>
  </body>
  <script src="js/vue.js"></script>
  <script>

    // 1.创建一个组件构造器
    var myComponent = Vue.extend({
      template: '<div>This is my first component!</div>'
    })

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

    new Vue({
      el: '#app'
    });

  </script>
</html>

越来越多prop验证的介绍,请参见:合韩语档prop验证

<!DOCTYPE html>
<html>
  <body>
    <div id="app1">
      <my-component></my-component>
    </div>

    <div id="app2">
      <my-component></my-component>
    </div>

    <!--该组件不会被渲染-->
    <my-component></my-component>
  </body>
  <script src="js/vue.js"></script>
  <script>
    var myComponent = Vue.extend({
      template: '<div>This is a component!</div>'
    })

    Vue.component('my-component', myComponent)

    var app1 = new Vue({
      el: '#app1'
    });

    var app2 = new Vue({
      el: '#app2'
    })
  </script>
</html>

Vue.component()的第二个参数是标具名称,第一个参数是一个挑选对象,使用选用对象的template属性定义组件模板。

纵然语法糖简化了组件注册,但在template选项中拼接HTML元素相比费心,那也致使了HTML和JavaScript的高耦合性。
弹冠相庆的是,Vue.js提供了三种艺术将定义在JavaScript中的HTML模板分离出来。

var Parent = Vue.extend(...)定义二个Parent组件构造器

在选用对象的components属性中完结部分注册:

在挑挑选老婆的components属性中达成部分注册:

分分快三计划 13

Vue.js规定:在概念组件的选项时,data和el选项必得采纳函数。

父组件和子组件

主导步骤

1.var Child = Vue.extend(...)定义一了个Child组件构造器

使用Vue.component()直接创建和挂号组件:

运转这段代码,浏览器会提示以下错误

是因为组件的篇幅极大,小编将会把组件的入门知识分为两篇来讲课,那样也便于各位看官们急忙消食。

<div id="app">
  <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
</div>

'})varvm1 =newVue({    el:'#app1'})

3.components: { 'child-component': Child },将Child组件注册到Parent组件,并将Child组件的标签设置为child-component。

转自新浪:

上面包车型地铁代码定义了贰个子零部件my-component,在Vue实例中定义了data选项。

分分快三计划 14

2. filterBy过滤器

my age{{ myAge }}

上面包车型大巴代码在施行时,浏览器会建议一个谬误

双向绑定

<parent-component>…</parent-component>约等于运作时,它的一些子标签只会被视作普通的HTML来实行,<child-component></child-component>不是明媒正娶的HTML标签,会被浏览器直接忽略掉。

props基础示例

1. Vue.extend()是Vue构造器的增加,调用Vue.extend()成立的是三个零件构造器,实际不是三个具体的零件实例。

假定我们想使父组件的数码,则必得先在子组件中定义props属性,也正是props: ['myName', 'myAge']那行代码。

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

纵然语法糖简化了组件注册,但在template选项中拼接HTML成分相比费心,那也招致了HTML和JavaScript的高耦合性。

  1. Vue.component()方法内部会调用组件构造器,创建三个组件实例。

  2. 组件应该挂载到有些Vue实例下,不然它不会收效。

var Child = Vue.extend(...)定义一了个Child组件构造器

3. 施用Vue.component()注册组件时,要求提供2个参数,第三个参数时组件的标签,第四个参数是组件构造器。

为了便利精晓,你可以将这么些Vue实例看作my-component的父组件。

<template id="myComponent">
  <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>

请小心上面三种子组件的施用格局是谬误的:

父组件是怎么样将数据传给子组件的吗?相信看了上边那图,可能你就能够很好地领略了。

能够使用.sync显式地内定双向绑定,那使得子组件的数目修改会回传给父组件。

只要你那样做了,浏览器会提醒二个谬误:

This is the first component!

调用Vue.component()注册组件时,组件的注册是大局的,那象征该器件能够在大肆Vue示例下使用。

咱们用以下多少个步骤来明白组件的创造和登记:

那使得HTML代码和JavaScript代码是分离的,便于阅读和保证。

运行结果如下:

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

在父组件中使用子组件时,通过以下语法将数据传递给子组件:

请介意第5点,以下代码在3个地点使用了<my-component>标签,但唯有#app1和#app2下的<my-component>标签才起到效果。

View Demo

零件系统是Vue.js个中一个第一的概念,它提供了一种浮泛,让大家能够运用独立可复用的小组件来塑造大型应用,猖獗档次的行使分界面都得以抽象为一个零部件树:

大局注册和一部分注册

分分快三计划 15

运维这些页面,大家做几个小检测:

  1. 在页面上改动父组件的数目

父组件和子组件

将父组件数据经过已定义好的props属性传递给子组件:

借使利用

在父组件中使用子组件时,通过以下语法将数据传递给子组件:

正文的Demo和源代码已放置GitHub,如若你认为本篇内容科学,请点个赞,或在GitHub上加个少于!

在领略了组件的创立和登记进度后,作者提议使用<script>或<template>标签来定义组件的HTML模板。

上面的代码定义了四个子零件my-component,在Vue实例中定义了data选项。

一边绑定

既然如此父组件将数据传递给了子组件,那么倘使实组件修改了数码,对父组件是不是会具备影响啊?

能够看出,使用组件和平运动用普通的HTML元素没什么区别。

总结

Vue.component()的第一个参数是标签字称,第一个参数是三个精挑对象,使用选用对象的template属性定义组件模板。
运用这种艺术,Vue在暗地里会自行地调用Vue.extend()。

分分快三计划 16

4.template :'<p>This is a Parent component</p><child-component></child-component>',在Parent组件内以标签的情势利用Child组件。

',在Parent组件内以标签的样式利用Child组件。

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="styles/demo.css" />
  </head>

  <body>
    <div id="app">
      <div id="searchBar">
        Search <input type="text" v-model="searchQuery" />
      </div>
      <simple-grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery">
      </simple-grid>
    </div>

    <template id="grid-template">
      <table>
        <thead>
          <tr>
            <th v-for="col in columns">
              {{ col | capitalize}}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="entry in data | filterBy filterKey">
            <td v-for="col in columns">
              {{entry[col]}}
            </td>
          </tr>
        </tbody>
      </table>
    </template>

  </body>
  <script src="js/vue.js"></script>
  <script>
    Vue.component('simple-grid', {
      template: '#grid-template',
      props: {
        data: Array,
        columns: Array,
        filterKey: String
      }
    })

    var demo = new Vue({
      el: '#app',
      data: {
        searchQuery: '',
        gridColumns: ['name', 'age', 'sex'],
        gridData: [{
          name: 'Jack',
          age: 30,
          sex: 'Male'
        }, {
          name: 'Bill',
          age: 26,
          sex: 'Male'
        }, {
          name: 'Tracy',
          age: 22,
          sex: 'Female'
        }, {
          name: 'Chris',
          age: 36,
          sex: 'Male'
        }]
      }
    })
  </script>

</html>

将父组件数据通过已定义好的props属性传递给子组件:

这段代码表示:父组件传递过来的data和columns必得是Array类型,filterKey必需是字符串类型。

分分快三计划 17

分分快三计划 18

别的,在Vue.js中,可创立.vue后缀的文件,在.vue文件中定义组件,那么些剧情笔者会在背后的文章介绍。

  1. prop验证

components: { 'child-component': Child },将Child组件注册到Parent组件,并将Child组件的竹签设置为child-component。

分分快三计划 19

'}    }})

鉴于my-component组件是挂号在#app成分对应的Vue实例下的,所以它不可能在其余Vue实例下利用。

分分快三计划 20

大局注册和一部分注册

运营这段代码,浏览器会提醒以下错误

下边包车型客车代码演示了那3个步骤:

  1. 在页面上修改父组件的数额

Child组件是在Parent组件中注册的,它不得不在Parent组件中使用,确切地说:子组件只可以在父组件的template中应用。

分分快三计划 21

分分快三计划 22

以上组件注册的方法某些麻烦,Vue.js为了简化那几个历程,提供了注册语法糖。

<div id="app">
  <parent-component>
    <child-component></child-component>
  </parent-component>
</div>

组件能够扩大HTML成分,封装可选择的HTML代码,大家得以将零件看作自定义的HTML成分。

<child-component v-bind:子组件prop="父组件数据属性"></child-component>

使用

1. 以子标签的情势在父组件中应用

prop的绑定类型

分分快三计划 23

在页面中央银行使标签渲染Parent组件的开始和结果,同期Child组件的内容也被渲染出来

<!DOCTYPE html>
<html>
  <body>
    <div id="app">
      <!-- 3. my-component只能在#app下使用-->
      <my-component></my-component>
    </div>
  </body>
  <script src="js/vue.js"></script>
  <script>
    // 1.创建一个组件构造器
    var myComponent = Vue.extend({
      template: '<div>This is my first component!</div>'
    })

    new Vue({
      el: '#app',
      components: {
        // 2. 将myComponent组件注册到Vue实例下
        'my-component' : myComponent
      }
    });
  </script>
</html>

varvm2 =newVue({    el:'#app2',    components: {// 局地注册,my-component2是标签字称'my-component2': {            template:'

只顾:使用<script>标签时,type内定为text/x-template,目的在于告知浏览器那不是一段js脚本,浏览器在深入分析HTML文书档案时会忽视<script>标签内定义的内容。

This is the third component!

假设采纳<template>标签,则无需钦命type属性。

1. prop验证

我们用以下多少个步骤来通晓组件的成立和挂号:

流传Vue构造器的比相当多取舍也能够用在Vue.extend()或Vue.component()中,可是有三个特例:data和el。

组件的el和data选项

父组件是什么将数据传给子组件的吗?相信看了上面那图,恐怕你就能够很好地领略了。

<div id="app">
  <parent-component>
  </parent-component>
  <child-component>
  </child-component>
</div>

View Demo

使用<script>标签

分分快三计划 24

运营结果如下:

分分快三计划 25

我们能够在组件中定义并选取任何零件,那就结成了父亲和儿子组件的涉及。

…也正是运作时,它的部分子标签只会被当作普通的HTML来实行,不是正经的HTML标签,会被浏览器直接忽视掉。

你或然感兴趣的小说:

  • 详解vue.js组件化开荒试行
  • vue.js学习之递归组件
  • Vue.js中用v-bind绑定class的注意事项
  • vue2.0付出实行总括之困苦篇
  • JavaScript之Vue.js【入门基础】
  • 深深了然vue.js双向绑定的完结原理
  • vue.js指令v-model完结情势
  • Vue.js路由组件vue-router使用方法详解
  • Vue2完成组件props双向绑定
  • 依照vue.js实现图片轮播效果
  • 浅谈Vue的中坚选取
  • 快快入门Vue

3. 用到Vue.component()注册组件时,须要提供2个参数,首个参数时组件的价签,第三个参数是组件构造器。

这段代码的运转结果如下:

Vue.component('my-component', {    data:function(){return{a :1}    }})

这段程序的运作结果如下:

使用script或template标签

单次绑定

This is a Parent component

能够使用.once显式地钦命单次绑定,单次绑定在创建之后不会同步之后的退换,那意味着正是父组件修改了数据,也不会传导给子组件。

为了赶紧消化吸取这一个知识,我们来做多个小示例吧。

零件可以扩展HTML成分,封装可选择的HTML代码,我们得以将零件看作自定义的HTML元素。

修改了父组件的数量,同临时间影响了子组件。

除此以外,假使data选项指向某些对象,那表示全数的零部件实例共用一个data。

Child组件是在Parent组件中注册的,它不得不在Parent组件中采纳,确切地说:子组件只可以在父组件的template中选取。

更加的多prop验证的介绍,请参见:官方文书档案prop验证

分分快三计划 26

利用Vue.component()间接创立和挂号组件:

View Demo

分分快三计划 27

分分快三计划 28

双向绑定

template选项现行反革命不再是HTML成分,而是三个id,Vue.js根据那一个id查找对应的元素,然后将以此元素内的HTML作为模板进行编写翻译。

props基础示例

我们应有选用贰个函数作为 data 选项,让这一个函数再次来到多少个新对象:

行使组件的前提是创立并登记组件,本篇文章详细介绍了组件从成立到应用的手续,并介绍了三种不相同的方法去创制和登记组件;然后介绍了组件的props选项,它用于将父组件的数额传递给子组件,最终大家用二个小的示范演示了那个知识点。

什么样是组件呢?

prop暗中同意是单向绑定:当父组件的品质变化时,将传输给子组件,可是反过来不会。那是为着防止子组件无意修改了父组件的图景

组件单向绑定组件双向绑定零件单次绑定Page DemoGitHub Source

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

定义子组件的HTML模板:

示例

幸甚的是,Vue.js提供了二种艺术将定义在JavaScript中的HTML模板分离出来。

只顾:在子组件中定义prop时,使用了camelCase命名法。由于HTML个性不区分轻重缓急写,camelCase的prop用于本性时,必要转为 kebab-case(短横线隔绝)。比如,在prop中定义的myName,在作为性龙时索要转移为my-name。

地点的演示能够改为一些注册的章程:

2.var Parent = Vue.extend(...)定义贰个Parent组件构造器

零件实例的功效域是孤立的。那意味不可能同期不应有在子组件的模版内直接援引父组件的数量。能够应用props把数据传给子组件。

分分快三计划 29

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

那么怎么着是组件呢?

my name{{ myName }}

分分快三计划 30

View Demo

分分快三计划 31

除开以上介绍的知识点,这么些示例还用到了多个知识点:

请小心下边二种子组件的行使情势是不当的:

prop暗中认可是单向绑定:当父组件的性质变化时,将传输给子组件,可是反过来不会。那是为着防止子组件无意修改了父组件的图景

分分快三计划 32

'},// 局部注册,my-component3是标具名称'my-component3': {            template:'

分分快三计划 33

运用这种格局,Vue在暗自会活动地调用Vue.extend()。

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

var vm1 = new Vue({
  el: '#app1'
})

上边包车型地铁代码演示了那3个步骤:

上边的演示可以改为局地注册的章程:

使用

Vue.component('my-component', {
  data: {
    a: 1
  }
})
  1. 在页面上修改子组件的数码

分分快三计划 34

利用组件的前提是创造并注册组件,本篇小说详细介绍了组件从创设到应用的步调,并介绍了二种区别的诀窍去创建和登记组件;然后介绍了组件的props选项,它用来将父组件的多寡传递给子组件,最后大家用八个小的亲自过问演示了这几个知识点。

能够依照钦命的字符串过滤数据。

子组件数据

除此以外,在Vue.js中,可创立.vue后缀的文本,在.vue文件中定义组件,那几个剧情小编会在前边的篇章介绍。

知晓组件的始建和注册

分分快三计划 35

注意:在子组件中定义prop时,使用了camelCase命名法。由于HTML性子不区分轻重缓急写,camelCase的prop用于特性时,供给转为 kebab-case(短横线隔断)。举个例子,在prop中定义的myName,在作为性情时供给退换为my-name。

主干步骤

Vue.component('my-component', {    data: {        a:1}})

var vm = new Vue({
  el: '#app',
  data: {
    name: 'keepfool',
    age: 28
  },
  components: {
    'my-component': {
      template: '#myComponent',
      props: ['myName', 'myAge']
    }
  }
})

组件的创始和挂号

分分快三计划 36

单向绑定

既是父组件将数据传递给了子组件,那么假设实组件修改了数额,对父组件是还是不是会具有影响吗?

分分快三计划 37

<!DOCTYPE html>
<html>
  <body>
    <div id="app">
      <my-component></my-component>
    </div>

    <script type="text/x-template" id="myComponent">
      <div>This is a component!</div>
    </script>
  </body>
  <script src="js/vue.js"></script>
  <script>

    Vue.component('my-component',{
      template: '#myComponent'
    })

    new Vue({
      el: '#app'
    })

  </script>
</html>

其他,假设data选项指向某些对象,那象征全数的组件实例共用二个data。

<div 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>
</div>

<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>

分分快三计划 38

零件实例的成效域是孤立的。那象征不可能同一时候不应当在子组件的沙盘内直接援引父组件的数量。能够行使 props 把数据传给子组件。

能够依照钦点的字符串过滤数据。

咱俩分多少个步骤来理解这段代码:

那使得HTML代码和JavaScript代码是分开的,便于阅读和保卫安全。

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

This is a component!

6.在页面中运用<parent-component>标签渲染Parent组件的内容,同不时间Child组件的剧情也被渲染出来

分分快三计划 39

分分快三计划 40

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

流传Vue构造器的大部增选也能够用在 Vue.extend() 或Vue.component()中,然而有八个特例: data 和el。
Vue.js规定:在概念组件的选项时,data和el选项必需使用函数。

我们得以在组件中定义并选用任何零件,那就重组了老爹和儿子组件的涉及。

零件的创办和注册

View Deom

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

2. filterBy过滤器

Vue.js的零件的运用有3个步骤:创设组件构造器、注册组件和采纳组件。

这段代码表示:父组件传递过来的data和columns必需是Array类型,filterKey必需是字符串类型。

使用script或template标签

name{{ name }}

总结

View Demo

修改了子组件的数目,没有影响父组件的数码。

varvm =newVue({    el:'#app',    data: {        name:'keepfool',        age:28},    components: {'my-component': {            template:'#myComponent',            props: ['myName','myAge']        }    }})

除了那么些之外上述介绍的知识点,那一个示例还用到了四个知识点:

分分快三计划 41

修改了父组件的数目,同有时候影响了子组件。

View Demo

age{{ age }}

This is the second component!

调用Vue.component()注册组件时,组件的挂号是大局的,那意味该器件能够在任性Vue示例下使用。

大家分多少个步骤来领会这段代码:

上边包车型客车代码在实行时,浏览器会提议一个不当

my name{{ myName }}

修改了子组件的数目,没有影响父组件的数码。

分分快三计划 42

零件注册语法糖

可以使用.once显式地钦定单次绑定,单次绑定在创制以往不会一起之后的改变,那象征正是父组件修改了数额,也不会传导给子组件。

子组件数据

View Deom

这段程序的运行结果如下:

注意:使用

Search{{ col | capitalize}}{{entry[col]}}

单次绑定

在明亮了组件的创导和登记进度后,作者提出选拔

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划 日记本