Hello!Vue.js组件-演道网

超简单的Vue.js组件入门


Vue组件

什么是vue组件?

在vue开发中,为了能让一些页面中的元素使用性和复用性更高我们可以将一些html元素封装成可用的一些组件或者是模板。然后通过嵌套的方式进行在页面中嵌套使用,实现一种积木式编程。

如何使用vue组件?

  1. 通过Vue.extend()声明组件
    Vue.extend是vue提供出来给我们实现组件的函数

    //组装组件(声明组件)
    var MyComponent = Vue.extend({
       //被封装的html内容
       template: '
    This is your first vue components!
    ', //绑定在这个组件内的数据 data: '', //监听这个组件的事件的方法 methods: '', //属性,通常被用来进行数据的通信 props: '' });
  2. 注册组件——向vue核心容器注册这个组件
    这是为了让vue更好的管理组件(复用和删除)

    Vue.component('my-component', MyComponent);
    //注册组件,传入别名(my-component)和组件名称(MyComponent)
  3. 初始化Vue.js的管理边界

    var vm = new Vue({
       el: '#app',
    });
  4. 装入组件

    在页面中嵌入
    

    简单四步,完成一个组件的装载流程 :)


已经与Vue.js组件打了个照面,该问问它点什么了

  • Q1: 组件化除了视图复用性更高以外的特殊作用?
    让一个组件具有自身独立的功能——模块化!>_
  • Q2: 如何在组件中进行js事件的绑定以及数据绑定?

    var MyComponent = Vue.extend({
        template: '

    ', methods: { searchList: function() { console.log('Your cause an event!'); }, }, ready: function() { //在模块准备就绪时触发 console.log("Loading Complete!"); }, data: function() { //这里进行数据绑定,注意,为了方便数据的预处理,组件中的data是通过函数返回的对象 return { result: '' } } });
  • Q3:那都是通过一对一的绑定来实现数据同步的吗?
    No!有种羁绊叫做组件嵌套

组件嵌套

通过组件之间的相互嵌套来达到组件内部的数据同步,并且这样的机制有利于开发功能性组件(如轮播图,搜索框,评论区等)

  • 父子组件通信
    • 父组件传值给子组件——只要data发生改变
      • 父组件的view发生改变,子组件的view也发生改变
      • 值传到子组件的方式是通过props属性
      • 子组件通过props数据进行view同步
        js脚本
        var child = Vue.extend({
            template: '{{ content }}

        ', props: ['content'] }); var Father = Vue.extend({ template: '
        ',//将message代理到content属性中 data: function() { return { message: '' } }, method: { sendMessage: function( event ) { //触发事件的事件列表 this.message = event.target.value; //改变message的值 } } }); //注册父组件 Vue.component('father-component', Father); //定义边界 var vm = new Vue({ el: '#app' });

        html

        运行效果:

        father&son
  • 兄弟组件通信
    兄弟组件的通信是通过一个共同的父组件或者边界来进行桥接
    • 创建兄弟组件
    • 通过父组件“桥梁函数”的“分发”,子组件分别得到model,并同步到自己的view中去
      js脚本
      //孪生哥哥
      var twinsCompOld = Vue.extend({
      template: 'I am the old brother, my age is  {{ title }}

      ', props: ['title', 'bridge'],//哥哥传入控制年龄增长的回调函数 methods: { GrowUp: function(event) { this.bridge(event.target.value);//将当前的年龄传入桥梁 } } }); //孪生弟弟 var twinsCompLittle = Vue.extend({ template: '

      I am the little brother, my age is {{ title }}

      ', props: ['title']//同步年龄 }); //父亲 var Father = Vue.extend({ template: '
      {{ say }}
      ', components: { 'oldBrother': twinsCompOld, 'littleBrother': twinsCompLittle }, data: function() { var self = this; //因为执行这个函数的是子组件,因此需要将父组件的指针保存一下 return { say: 'Daddy love you!', sonAge: 0, sendMessage: function( content ) { //桥梁函数 self.sonAge = content; return self.sonAge;//儿子的年龄变化了 } } } }); //注册父组件 Vue.component('father-component', Father); //定义边界 var vm = new Vue({ el: '#app' });

      html:

      
      
      

      运行效果:

      brother

转载自演道,想查看更及时的互联网产品技术热点文章请点击http://go2live.cn

发表评论

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