60分钟组件快捷入门,js之组件篇

By admin in 4858美高梅 on 2019年5月5日

Vue.js 组件

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

零件(Component)是 Vue.js 最庞大的成效之壹,组件能够扩大 HTML
成分,封装可选取的代码。

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

4858美高梅 1

零件简单介绍

如何是组件呢?

零件简要介绍

选取Vue.extend来创建全局vue组件:

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

组件系统是Vue.js当中一个重中之重的定义,它提供了一种浮泛,让我们得以行使独立可复用的小组件来创设大型应用,放肆档期的顺序的行使分界面都得以抽象为三个零部件树:

4858美高梅 2

组件系统是Vue.js在这之中二个根本的概念,它提供了一种浮泛,让我们得以行使独立可复用的小组件来创设大型应用,放肆档期的顺序的行使分界面都得以抽象为叁个组件树:

这儿只是表明了2个叫com壹的零部件,借使要在vue实例中使用组件,还须求通过以下办法来注册组件:

   Vue.component('myCom1', com1)

4858美高梅 3

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

4858美高梅 4 

组件的调用: 

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

那就是说怎么样是组件呢?

本文的德姆o和源代码已停放GitHub,要是您感到本篇内容科学,请点个赞,或在GitHub上加个轻便!

那么如何是组件呢?
组件能够扩大HTML成分,封装可选拔的HTML代码,我们能够将零件看作自定义的HTML成分。

 注意事项:

  1. 假定利用 Vue.component
    注册组件的时候,组件名称使用了驼峰命名,则在引用组件的时候,需求把大写的驼峰改为小写的假名,同时,四个单词之间使用
    “-” 连接
  2. 一旦不利用驼峰,则一向拿名称来利用就可以;

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

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

零件的创导和挂号

其余二种创造组件的方法:

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

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

鉴于组件的篇幅相当大,小编将会把组件的入门知识分为两篇来说学,那样也惠及各位看官们快快消化吸收。

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

骨干步骤

注意:不论是哪类办法创制出来的零件,组件的 template 属性指向的模版内容,必须有且只可以有唯一的3个根成分

60分钟组件快捷入门,js之组件篇。组件的创始和挂号

由于组件的字数很大,小编将会把组件的入门知识分为两篇来教学,那样也有益各位看官们十分的快消化吸收。

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

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

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

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

中央步骤

零件的成立和注册

4858美高梅 5 

 私有组件:

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

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

Vue.js的零件的运用有贰个步骤:创立组件构造器、注册组件和动用组件。

大旨步骤

上面包车型大巴代码演示了那二个步骤:

零件中的data和methods:

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

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

4858美高梅 6

Vue.js的零部件的选取有三个步骤:创制组件构造器、注册组件和利用组件。

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

 为何组件中的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: {}
    });

调用测试结果如下 :

4858美高梅 7

各个计数器的count是单独的,如将将再次来到的值改为:

        return dataObj
        //return { count: 0 }

结果为:

4858美高梅 8

各种组件的count是共享的,组件的data必须是贰个艺术,且务必回到一个目的。要缓慢解决的主题材料即是巩固组件的复用性,幸免组件与组件之间成员困扰。

上面包车型客车代码演示了那1个步骤:

4858美高梅 9

运行结果如下:

零件的切换:

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

以身作则结果如下,默许展现登六组件,点击注册切换来注册组件,点击登六切换的报到组件。

4858美高梅 10

 

 

 

症结分析:假如在1个急需中供给切换越多的机件,那种方法不便利扩充。

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

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

4858美高梅 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>

运行结果如下:

运作结果如下:

能够见到,使用组件和采纳普通的HTML成分没什么分裂。

子组件引用父组件的值:

 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>

实行结果:

4858美高梅 12

私下认可意况下子组件是无法引用父组件的品质和目的的,我们得以在引用子组件的时候,通过质量绑定的样式(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>

4858美高梅 13

4858美高梅 14

明亮组件的创制和登记

子组件调用父组件的方式:

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

 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>

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

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

咱俩用以下多少个步骤来精晓组件的创始和登记:
1.
Vue.extend()是Vue构造器的扩展,调用Vue.extend()成立的是三个零件构造器,而不是3个现实的零件实例。
2.
Vue.extend()构造器有八个摘取对象,选项对象的template属性用于定义组件要渲染的HTML。
三.
运用Vue.component()注册组件时,须求提供3个参数,第二个参数时组件的价签,第二个参数是组件构造器。

实行结果:

4858美高梅 15

自己的博客将在搬运一只至腾讯云+社区,邀约我们一齐入驻:

明亮组件的始建和注册

领悟组件的创建和登记

  1. Vue.component()方法内部会调用组件构造器,创造八个零件实例。
  2. 零件应该挂载到有些Vue实例下,不然它不会收效。

咱俩用以下多少个步骤来明白组件的创始和挂号:

笔者们用以下多少个步骤来精通组件的创立和挂号:

请留心第伍点,以下代码在三个地点选用了my-component标签,但唯有#app1和#app二下的my-component标签才起到效率。

壹.
Vue.extend()是Vue构造器的恢宏,调用Vue.extend()创制的是多个组件构造器,而不是二个有血有肉的零部件实例。

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

<!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.extend()构造器有叁个取舍对象,选项对象的template属性用于定义组件要渲染的HTML。

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

4858美高梅 16

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

3.
使用Vue.component()注册组件时,供给提供二个参数,第贰个参数时组件的竹签,第2个参数是组件构造器。

大局注册和局地注册

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

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

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

调用Vue.component()注册组件时,组件的登记是全局的,那表示该零件能够在放四Vue示例下使用。
假设无需全局注册,可能是让组件使用在其余组件内,能够用选项对象的components属性达成部分注册。

请小心第5点,以下代码在三个地点选择了<my-component>标签,但只有#app1和#app二下的<my-component>标签才起到效果。

请留意第四点,以下代码在三个地方使用了标签,但只有#app1和#app二下的标签才起到效果。

地点的演示能够改为部分注册的办法:

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

4858美高梅 17

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

由于my-component组件是注册在#app元素对应的Vue实例下的,所以它不能在其它Vue实例下使用。

<div id="app2">
 <!-- 不能使用my-component组件,因为my-component是一个局部组件,它属于#app-->
 <my-component></my-component>
</div>

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

4858美高梅 18

View
Demo

要是你如此做了,浏览器会提示三个谬误:

大局注册和一些注册

大局注册和有个别注册

4858美高梅 19

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

调用Vue.component()注册组件时,组件的登记是全局的,那意味该器件能够在大4Vue示例下使用。

父组件和子组件

若是无需全局注册,或然是让组件使用在其余组件内,能够用选项对象的components属性达成部分注册。

一旦没有必要全局注册,恐怕是让组件使用在别的组件内,能够用选料对象的components属性落成部分注册

我们能够在组件中定义并行使别的零件,那就组成了老爹和儿子组件的关系。

上边包车型地铁示范能够改为局地注册的章程:

地点的演示能够改为局地注册的不2秘技:

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

出于my-component组件是登记在#app成分对应的Vue实例下的,所以它无法在其余Vue实例下行使。

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

是因为my-component组件是登记在#app元素对应的Vue实例下的,所以它不能够在任何Vue实例下采纳。

比如你这么做了,浏览器会提醒叁个张冠李戴:

4858美高梅 20 

<div id="app2">
  <!-- 不能使用my-component组件,因为my-component是一个局部组件,它属于#app-->
  <my-component></my-component>
</div>

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

4858美高梅 21

我们分多少个步骤来驾驭那段代码:

只要您这么做了,浏览器会提示三个荒谬:

View
Demo

作者们分多少个步骤来掌握那段代码:

4858美高梅 22

父组件和子组件

var Child =
Vue.extend(…)定义一了个Child组件构造器
var Parent =
Vue.extend(…)定义1个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组件的剧情,同时Child组件的剧情也被渲染出来

父组件和子组件

咱俩能够在组件中定义并运用其余零件,那就构成了父子组件的关系。

4858美高梅 23 

大家可以在组件中定义并应用别的零件,那就结成了父亲和儿子组件的关系。

那段代码的运作结果如下:

Child组件是在Parent组件中登记的,它只辛亏Parent组件中利用,确切地说:子组件只可以在父组件的template中运用。

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

4858美高梅 24

请留意上面两种子组件的接纳办法是破绽百出的:

那段代码的运作结果如下:

我们分几个步骤来领悟那段代码:

1. 以子标签的花样在父组件中选拔

4858美高梅 25

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

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

我们分几个步骤来领悟那段代码:

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

为什么那种艺术行不通呢?因为当子组件注册到父组件时,Vue.js会编写翻译好父组件的沙盘,模板的剧情已经决定了父组件就要渲染的HTML。

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

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

parent-component相当于运作时,它的部分子标签只会被当做普通的HTML来实行,child-component不是正经的HTML标签,会被浏览器直接忽略掉。

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

template :’

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

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

This is a Parent component

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

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

‘,在Parent组件内以标签的花样利用Child组件。

运作那段代码,浏览器会提醒以下错误

五.Vue.component(‘parent-component’, Parent) 全局注册Parent组件

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

4858美高梅 26

陆.在页面中选择<parent-component>标签渲染Parent组件的内容,同时Child组件的剧情也被渲染出来

在页面中运用标签渲染Parent组件的剧情,同时Child组件的源委也被渲染出来

组件注册语法糖

4858美高梅 27

4858美高梅 28

以上组件注册的主意有个别麻烦,Vue.js为了简化这些进度,提供了注册语法糖。

Child组件是在Parent组件中登记的,它只万幸Parent组件中动用,确切地说:子组件只可以在父组件的template中使用。

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

应用Vue.component()间接开立和注册组件:

请小心下边二种子组件的施用办法是荒唐的:

请小心上边三种子组件的选择办法是大错特错的:

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

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

一. 以子标签的款式在父组件中利用

一. 以子标签的样式在父组件中央银行使

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

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

为何那种措试行不通呢?因为当子组件注册到父组件时,Vue.js会编写翻译好父组件的模版,模板的开始和结果已经调节了父组件将在渲染的HTML。

在采取对象的components属性中落成部分注册:

何以这种办法行不通呢?因为当子组件注册到父组件时,Vue.js会编写翻译好父组件的模版,模板的开始和结果早已调整了父组件就要渲染的HTML。

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

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>'
 }
 }
})

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

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

使用script或template标签

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

运行那段代码,浏览器会提醒以下错误

即使语法糖简化了组件注册,但在template选项中拼接HTML成分比较勤奋,那也形成了HTML和JavaScript的高耦合性。
幸甚的是,Vue.js提供了两种办法将概念在JavaScript中的HTML模板分离出来

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

4858美高梅 29

使用script标签

运维那段代码,浏览器会提醒以下错误

View
Demo

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

4858美高梅 30

零件注册语法糖

template选项现行反革命不再是HTML成分,而是一个id,Vue.js按照这么些id查找对应的元素,然后将这些成分内的HTML作为模板举行编写翻译。

组件注册语法糖

如上组件注册的方法有点麻烦,Vue.js为了简化那么些进程,提供了注册语法糖。

4858美高梅 31 

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

利用Vue.component()直接创制和注册组件:

专注:使用script标签时,type内定为text/x-template,意在报告浏览器那不是一段js脚本,浏览器在解析HTML文档时会忽略script标签内定义的故事情节。

接纳Vue.component()直接创设和注册组件:

// 全局注册,my-component壹是标签名称Vue.component(‘my-component一’,{   
template:’

4858美高梅 32

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

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

This is the first component!

使用template标签

Vue.component()的第贰个参数是标具名称,第1个参数是三个摘取对象,使用选拔对象的template属性定义组件模板。
选拔那种格局,Vue在背后会活动地调用Vue.extend()。

‘})varvm1 =newVue({    el:’#app1’})

只要使用template>标签,则无需内定type属性。

在挑选对象的components属性中贯彻部分注册:

Vue.component()的第三个参数是标具名称,第3个参数是八个选用对象,使用接纳对象的template属性定义组件模板。

<!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>
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>'
    }
  }
})

行使那种艺术,Vue在暗地里会自动地调用Vue.extend()。

在精通了组件的创立和登记进度后,小编提出选拔script>或template>标签来定义组件的HTML模板。
那使得HTML代码和JavaScript代码是分手的,便于阅读和保卫安全。
此外,在Vue.js中,可成立.vue后缀的公文,在.vue文件中定义组件,那几个剧情笔者会在背后的稿子介绍

使用script或template标签

在挑选对象的components属性中得以达成部分注册:

组件的el和data选项

就算语法糖简化了组件注册,但在template选项中拼接HTML成分比较麻烦,那也导致了HTML和JavaScript的高耦合性。
庆幸的是,Vue.js提供了二种格局将概念在JavaScript中的HTML模板分离出来。

varvm2 =newVue({    el:’#app二’,    components: {//
局地注册,my-component二是标具名称’my-component二’: {           
template:’

盛传Vue构造器的大许多选项也能够用在 Vue.extend()
或Vue.component()中,可是有七个特例: data 和el。
Vue.js规定:在概念组件的选项时,data和el选项必须选取函数。

使用<script>标签

This is the second component!

下边包车型客车代码在实行时,浏览器会提议3个漏洞非常多

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

‘},// 局地注册,my-component三是标签字称’my-component叁’: {           
template:’

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

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

This is the third component!

4858美高梅 33 

4858美高梅 34

‘}    }})

别的,如若data选项指向某些对象,那意味着全数的组件实例共用三个data。
我们理应利用一个函数作为 data 选项,让那些函数再次回到3个新对象:

瞩目:使用<script>标签时,type钦命为text/x-template,目的在于报告浏览器那不是1段js脚本,浏览器在解析HTML文书档案时会忽略<script>标签钦赐义的剧情。

View
Demo

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

4858美高梅 35

使用script或template标签

使用props

使用<template>标签

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

零件实例的成效域是孤立的。这表示无法同时不应有在子组件的模板内直接引用父组件的数目。能够行使
props 把多少传给子组件。

假定运用<template>标签,则不须要钦点type属性。

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

props基础示例
下边包车型大巴代码定义了2个子零件my-component,在Vue实例中定义了data选项。

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

使用

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

在明亮了组件的始建和挂号进度后,笔者建议利用<script>或<template>标签来定义组件的HTML模板。

This is a component!

为了方便精通,你能够将那一个Vue实例看作my-component的父组件。
万1大家想利用父组件的数据,则必须先在子组件中定义props属性,也正是props:
[‘myName’, ‘myAge’]那行代码。

那使得HTML代码和JavaScript代码是分手的,便于阅读和护卫。

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

定义子组件的HTML模板:

别的,在Vue.js中,可创造.vue后缀的公文,在.vue文件中定义组件,这些剧情作者会在后面包车型地铁稿子介绍。

4858美高梅 36

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

组件的el和data选项

注意:使用

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

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

4858美高梅 37

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

下边包车型客车代码在实施时,浏览器会建议3个张冠李戴

使用

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

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

要是运用

那段程序的周转结果如下:

4858美高梅 38

This is a component!

4858美高梅 39 

除此以外,尽管data选项指向有些对象,那象征全部的机件实例共用二个data。

在知道了组件的始建和注册进度后,笔者建议使用

父组件是怎么将数据传给子组件的啊?相信看了上面那图,可能你就能够很好地通晓了。

咱俩应有采纳3个函数作为 data 选项,让这么些函数重临3个新目的:

那使得HTML代码和JavaScript代码是分手的,便于阅读和护卫。

4858美高梅 40 

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

除此以外,在Vue.js中,可创设.vue后缀的文件,在.vue文件中定义组件,那几个剧情笔者会在末端的稿子介绍。

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

使用props

组件的el和data选项

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

零件实例的功用域是孤立的。那表示不能够同时不应该在子组件的模版内直接引用父组件的数量。可以采用props 把数量传给子组件。

传扬Vue构造器的大许多选项也得以用在Vue.extend()或Vue.component()中,可是有八个特例:data和el。

prop的绑定类型

props基础示例

Vue.js规定:在概念组件的选项时,data和el选项必须使用函数。

1方面绑定

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

上边的代码在实施时,浏览器会建议二个指鹿为马

既然如此父组件将数据传递给了子组件,那么如若实组件修改了数额,对父组件是或不是会持有影响呢?
俺们将子组件模板和页面HTML稍作改换:

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

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

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

为了方便精通,你能够将以此Vue实例看作my-component的父组件。

4858美高梅 41

运行那么些页面,我们做多个小检验:

若果我们想使父组件的数码,则必须先在子组件中定义props属性,也正是props:
[‘myName’, ‘myAge’]这行代码。

其它,假诺data选项指向有些对象,这表示全部的组件实例共用2个data。

  1. 在页面上修改子组件的多少

定义子组件的HTML模板:

大家相应利用二个函数作为 data 选项,让那个函数重临一个新目标:

4858美高梅 42 

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

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

修改了子组件的多寡,未有影响父组件的数据。

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

使用props

  1. 在页面上修改父组件的多寡
<div id="app">
  <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
</div>

组件实例的效用域是孤立的。那代表不能够而且不应当在子组件的模板内一贯引用父组件的多少。可以动用props把数量传给子组件。

4858美高梅 43 

小心:在子组件中定义prop时,使用了camelCase命名法。由于HTML特性不区分轻重缓急写,camelCase的prop用于性子时,须要转为
kebab-case(短横线隔断)。举例,在prop中定义的myName,在作为性卯时需求更改为my-name。

props基础示例

修改了父组件的多寡,同时影响了子组件。

那段程序的周转结果如下:

上面包车型大巴代码定义了1个子零件my-component,在Vue实例中定义了data选项。

prop暗中同意是单向绑定:当父组件的性质变化时,将传输给子组件,可是反过来不会。这是为着幸免子组件无意修改了父组件的情事

4858美高梅 44

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

双向绑定

父组件是如何将数据传给子组件的吧?相信看了上面那图,大概你就能够很好地掌握了。

为了便于理解,你能够将以此Vue实例看作my-component的父组件。

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

4858美高梅 45

假若大家想使父组件的数据,则必须先在子组件中定义props属性,也正是props:
[‘myName’, ‘myAge’]那行代码。

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

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

定义子组件的HTML模板:

4858美高梅 46

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

子组件数据

单次绑定

prop的绑定类型

my name{{ myName }}

能够使用.once显式地钦定单次绑定,单次绑定在成立将来不会共同之后的成形,那表示就是父组件修改了数额,也不会传导给子组件。

一派绑定

my age{{ myAge }}

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

既是父组件将数据传递给了子组件,那么要是实组件修改了多少,对父组件是不是会具有影响呢?

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

4858美高梅 47

大家将子组件模板和页面HTML稍作退换:

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

示例

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

View
Demo

为了赶紧消化吸收那一个知识,我们来做2个小示例吧。

运维那一个页面,大家做三个小质量评定:

那段程序的运维结果如下:

<!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>
  1. 在页面上修改子组件的数量

4858美高梅 48

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

4858美高梅 49

父组件是什么样将数据传给子组件的吧?相信看了上边那图,只怕你就能够很好地领悟了。

1. prop验证

修改了子组件的多少,未有影响父组件的多少。

4858美高梅 50

props: {
 data: Array,
 columns: Array,
 filterKey: String
}
  1. 在页面上修改父组件的数量

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

那段代码表示:父组件传递过来的data和columns必须是Array类型,filterKey必须是字符串类型。
越来越多prop验证的牵线,请参见:官方文书档案prop验证

4858美高梅 51

prop的绑定类型

2. filterBy过滤器
能够依赖钦定的字符串过滤数据。

修改了父组件的数码,同时影响了子组件。

另壹方面绑定

4858美高梅 52

prop默许是单向绑定:当父组件的性质变化时,将传输给子组件,然而转头不会。那是为了幸免子组件无意修改了父组件的动静

既是父组件将数据传递给了子组件,那么借使实组件修改了数码,对父组件是还是不是会有着影响吗?

总结

4858美高梅,双向绑定

笔者们将子组件模板和页面HTML稍作改换:

接纳组件的前提是创造并注册组件,本篇文章详细介绍了组件从创设到应用的步调,并介绍了两种不一致的方式去创立和挂号组件;然后介绍了组件的props选项,它用来将父组件的数量传递给子组件,最后大家用一个小的以身作则演示了那些知识点。

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

父组件数据

正文已被收拾到了《Vue.js前端组件学习课程》,欢迎大家学习阅读。

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

name{{ name }}

有关vue.js组件的学科,请我们点击专题vue.js组件学习课程拓展学习。

4858美高梅 53

age{{ age }}

下壹篇小说地址:分分钟玩转Vue.js组件(二)

单次绑定

子组件数据

上述正是本文的全体内容,希望对大家的求学抱有帮助,也冀望我们多多辅助脚本之家。

能够使用.once显式地钦赐单次绑定,单次绑定在确立之后不会共同之后的更动,那表示正是父组件修改了数码,也不会传导给子组件。

my name{{ myName }}

您只怕感兴趣的稿子:

  • 依赖Vue.js的报表分页组件
  • Vue.js天天必学之组件与组件间的通信
  • Vue.js
    父亲和儿子组件通讯支出实例
  • Vue.js动态组件解析
  • 庞大Vue.js组件浅析
  • 使用vue.js制作分页组件
  • 深远研商Vue.js组件和组件通讯
  • 关于vue.js弹窗组件的知识点总计
  • Vue.js完毕一个自定义分页组件vue-paginaiton
  • webpack+vue.js完成组件化详解
<my-component v-bind:my-name.once="name" v-bind:my-age.once="age"></my-component>

my age{{ myAge }}

4858美高梅 54

View
Demo

示例

运行这些页面,大家做四个小检查实验:

为了赶紧消食那个知识,大家来做1个小示例吧。

  1. 在页面上修改子组件的数据
<!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>

4858美高梅 55

除去上述介绍的知识点,那个示例还用到了三个知识点:

修改了子组件的多寡,未有影响父组件的多寡。

  1. prop验证
  1. 在页面上修改父组件的数目
props: {
  data: Array,
  columns: Array,
  filterKey: String
}

4858美高梅 56

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

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

更加多prop验证的牵线,请参考:合法文书档案prop验证

prop暗中认可是单向绑定:当父组件的性子变化时,将传输给子组件,但是转头不会。那是为着幸免子组件无意修改了父组件的动静

2. filterBy过滤器

双向绑定

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

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

4858美高梅 57

4858美高梅 58

总结

View
Deom

动用组件的前提是创设并注册组件,本篇文章详细介绍了组件从创造到应用的步骤,并介绍了三种不一致的方法去成立和登记组件;然后介绍了组件的props选项,它用来将父组件的数据传递给子组件,最终大家用四个小的示范演示了那一个知识点。

单次绑定

你或者感兴趣的篇章:

  • 详解vue.js组件化开荒施行
  • vue.js学习之递归组件
  • Vue.js中用v-bind绑定class的注意事项
  • vue2.0付出推行计算之费劲篇
  • JavaScript之Vue.js【入门基础】
  • 深远通晓vue.js双向绑定的兑现原理
  • vue.js指令v-model实现情势
  • Vue.js路由组件vue-router使用方式详解
  • Vue二实现组件props双向绑定
  • 依靠vue.js达成图片轮播效果
  • 浅谈Vue的为主选拔
  • 高速入门Vue

能够使用.once显式地钦命单次绑定,单次绑定在创设今后不会共同之后的成形,那意味正是父组件修改了数码,也不会传导给子组件。

4858美高梅 59

View
Deom

示例

为了赶紧消化吸收这个文化,咱们来做1个小示例吧。

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

View
Demo

而外以上介绍的知识点,这些示例还用到了四个知识点:

1. prop验证

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

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

愈多prop验证的牵线,请参考:合法文书档案prop验证

2. filterBy过滤器

可以依靠钦点的字符串过滤数据。

4858美高梅 60

总结

采纳组件的前提是创办并登记组件,本篇文章详细介绍了组件从成立到利用的步子,并介绍了两种不一样的措施去创立和注册组件;然后介绍了组件的props选项,它用于将父组件的多少传递给子组件,最终大家用三个小的言传身教演示了那么些知识点。

转自天涯论坛:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有