分分钟玩转Vue,60分钟组件急迅入门

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

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在那之中八个主要的定义,它提供了1种浮泛,让我们得以行使独立可复用的小组件来打造大型应用,任意档次的选取界面都得以抽象为三个组件树:

那会儿只是注明了3个叫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,60分钟组件急迅入门。查阅示例汇总)

零件的成立和登记

其余三种创建组件的点子:

    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 属性指向的模板内容,必须有且不得不有唯一的二个根成分

组件的始建和注册

出于组件的篇幅较大,作者将会把组件的入门知识分为两篇来讲课,那样也有益各位看官们急速消化。

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

在被调整的#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可以为七个对象,可是组件中的data必须是一个方式;
  3. 零件中的data除了必须为1个措施之外,那个法子内部还非得返回2个对象;
  4. 零件中的data数据,使用办法和实例中的data使用办法完全平等

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

4858美高梅 6

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

<!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必须是三个主意,且必须再次回到3个对象。要消除的主题材料就是增高组件的复用性,幸免组件与组件之间成员烦扰。

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

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>

以身作则结果如下,私下认可突显登入组件,点击注册切换成注册组件,点击登6切换的记名组件。

4858美高梅 10

 

 

 

缺陷分析:若是在2个须求中要求切换更多的组件,那种方法不便于扩大。

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

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

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成分没什么区别。

我们用以下多少个步骤来通晓组件的开创和注册:
一.
Vue.extend()是Vue构造器的扩充,调用Vue.extend()创设的是3个零部件构造器,而不是多个具体的零部件实例。
二.
Vue.extend()构造器有叁个选用对象,选项对象的template属性用于定义组件要渲染的HTML。
三.
施用Vue.component()注册组件时,须要提供1个参数,第三个参数时组件的标签,第三个参数是组件构造器。

实践结果:

4858美高梅 15

自个儿的博客将要搬运1头至腾讯云+社区,约请大家一齐入驻:

接头组件的成立和挂号

知晓组件的始建和注册

  1. Vue.component()方法内部会调用组件构造器,创造多少个组件实例。
  2. 零件应该挂载到有些Vue实例下,否则它不会一蹴而就。

咱俩用以下多少个步骤来精晓组件的创导和挂号:

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

请留心第4点,以下代码在三个地点接纳了my-component标签,但唯有#app1和#app2下的my-component标签才起到功用。

一.
Vue.extend()是Vue构造器的恢宏,调用Vue.extend()创设的是3个组件构造器,而不是一个切实可行的零部件实例。

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

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

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

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

4858美高梅 16

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

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

大局注册和部分注册

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

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

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

调用Vue.component()注册组件时,组件的注册是大局的,那代表该器件能够在任意Vue示例下使用。
设若不须要全局注册,或然是让组件使用在此外组件内,能够用选项对象的components属性达成部分注册。

请留心第4点,以下代码在贰个地点使用了<my-component>标签,但唯有#app1和#app二下的<my-component>标签才起到效能。

请留意第4点,以下代码在1个地点选择了标签,但唯有#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()注册组件时,组件的注册是全局的,那代表该零件能够在任意Vue示例下使用。

父组件和子组件

比方不须要全局注册,大概是让组件使用在任何组件内,能够用选项对象的components属性落成部分注册。

若果不须求全局注册,只怕是让组件使用在任何组件内,能够用挑选对象的components属性完结部分注册

我们得以在组件中定义并应用其余零件,那就结成了父亲和儿子组件的涉嫌。

地方的以身作则能够改为局地注册的法子:

地点的示范能够改为局地注册的点子:

<!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(…)定义三个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

请小心上面三种子组件的行使方式是大错特错的:

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

咱俩分多少个步骤来精通那段代码:

壹. 以子标签的款型在父组件中动用

4858美高梅 25

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

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

咱俩分多少个步骤来了解那段代码:

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

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

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

1. 以子标签的花样在父组件中运用

一. 以子标签的样式在父组件中动用

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标签,会被浏览器直接忽略掉。

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

使用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,旨在告知浏览器那不是1段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()的第三个参数是标具名称,第一个参数是3个选项对象,使用采纳对象的template属性定义组件模板。
利用那种方法,Vue在幕后会自动地调用Vue.extend()。

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

倘使使用template>标签,则不要求内定type属性。

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

Vue.component()的第1个参数是标具名称,第1个参数是三个取舍对象,使用选拔对象的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-component2是标具名称’my-component二’: {           
template:’

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

使用<script>标签

This is the second component!

下边包车型大巴代码在举行时,浏览器会提出2个错误

<!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-component3是标签字称’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选项指向有些对象,那象征全部的零部件实例共用3个data。
笔者们应当选取1个函数作为 data 选项,让那几个函数重返二个新目的:

小心:使用<script>标签时,type钦命为text/x-template,目的在于告诉浏览器那不是一段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基础示例
上面包车型大巴代码定义了一个子组件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的父组件。
假定大家想接纳父组件的数码,则必须先在子组件中定义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选项指向某些对象,那代表全数的组件实例共用3个data。

在掌握了组件的创建和挂号进程后,我提出选拔

父组件是怎么样将数据传给子组件的吧?相信看了下边那图,也许你就能很好地精晓了。

我们应当选用叁个函数作为 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选项必须采取函数。

单向绑定

上边包车型客车代码定义了三个子零件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选项指向某些对象,那意味着全部的零部件实例共用二个data。

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

定义子组件的HTML模板:

作者们理应选取2个函数作为 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基础示例

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

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

上面包车型地铁代码定义了七个子组件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

万1大家想使父组件的数量,则必须先在子组件中定义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显式地钦命单次绑定,单次绑定在建立之后不会一齐之后的变通,那表示正是父组件修改了数额,也不会传导给子组件。

1方面绑定

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

为了尽快消化那几个知识,大家来做二个小示例吧。

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

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

<!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过滤器
能够依照内定的字符串过滤数据。

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

1边绑定

4858美高梅 52

prop私下认可是单向绑定:当父组件的习性别变化化时,将传输给子组件,可是转头不会。那是为着幸免子组件无意修改了父组件的意况

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

总结

双向绑定

咱俩将子组件模板和页面HTML稍作改变:

运用组件的前提是创造并注册组件,本篇小说详细介绍了组件从创设到利用的步子,并介绍了二种分化的措施去创制和注册组件;然后介绍了组件的props选项,它用来将父组件的多少传递给子组件,最终大家用3个小的言传身教演示了这个知识点。

能够使用.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 }}

下1篇作品地址:分分钟玩转Vue.js组件(二)

单次绑定

子组件数据

如上就是本文的全部内容,希望对我们的上学抱有支持,也期望大家多多帮忙脚本之家。

能够使用.once显式地钦定单次绑定,单次绑定在确立之后不会同步之后的变动,那意味着便是父组件修改了数据,也不会传导给子组件。

my name{{ myName }}

您只怕感兴趣的篇章:

  • 据他们说Vue.js的报表分页组件
  • Vue.js每一日必学之组件与组件间的通讯
  • Vue.js
    父亲和儿子组件通讯支出实例
  • Vue.js动态组件解析
  • 强硬Vue.js组件浅析
  • 行使vue.js制作分页组件
  • 深切切磋Vue.js组件和零部件通讯
  • 有关vue.js弹窗组件的知识点计算
  • Vue.js完成3个自定义分页组件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. 在页面上修改子组件的数码
<!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

运用组件的前提是成立并注册组件,本篇文章详细介绍了组件从创制到使用的步子,并介绍了二种分裂的不2秘籍去创建和挂号组件;然后介绍了组件的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 版权所有