Hello！Vue.js组件

spacewander 发布于2019-08-20 12:13 / 1444人阅读

摘要：超简单的组件入门组件什么是组件在开发中，为了能让一些页面中的元素使用性和复用性更高我们可以将一些元素封装成可用的一些组件或者是模板。然后通过嵌套的方式进行在页面中嵌套使用，实现一种积木式编程。

超简单的Vue.js组件入门

Vue组件 什么是vue组件？

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

如何使用vue组件？

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

//组装组件（声明组件）
var MyComponent = Vue.extend({
      //被封装的html内容
      template: "This is your first vue components!"，
      //绑定在这个组件内的数据
      data: "",
      //监听这个组件的事件的方法
      methods: "",
      //属性，通常被用来进行数据的通信
      props: ""
});

注册组件——向vue核心容器注册这个组件
这是为了让vue更好的管理组件（复用和删除）

Vue.component("my-component", MyComponent);
//注册组件，传入别名（my-component）和组件名称（MyComponent）

初始化Vue.js的管理边界

var vm = new Vue({
      el: "#app",
});

装入组件

在页面中嵌入

简单四步，完成一个组件的装载流程：）

已经与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

运行效果：

兄弟组件通信
兄弟组件的通信是通过一个共同的父组件或者边界来进行桥接

创建兄弟组件

通过父组件“桥梁函数”的“分发”，子组件分别得到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:

运行效果：

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80859.html

快速入门 - Vue2 Tutorials (一)

摘要：在这个组件里面有一些链接列表，和，这些列表直接使用编写按照传统的写法，如果我们需要往里面添加链接的时候，每次我们都得添加和标签。所以修改如下这样我们就把数据和视图分开了，模板里面的代码也简洁了很多，不再需要写很多重复的代码。 Vue 的官方文档对 Vue 介绍非常详细，但官方文档使用在 HTML 中引入 vue 的方式进行讲解，而实际项目中一般使用脚手架如 vue-cli 初始化项目...

djfml 2019-08-20 17:47 评论0 收藏0
Vue.js起手式+Vue小作品实战

摘要：本文是小羊根据文档进行解读的第一篇文章，主要内容涵盖的基础部分的知识的，文章顺序基本按照官方文档的顺序，每个知识点现附上代码，然后根据代码给予个人的一些理解，最后还放上在线编辑的代码以供练习和测试之用在最后，我参考上的一篇技博，对进行初入的本文是小羊根据Vue.js文档进行解读的第一篇文章，主要内容涵盖Vue.js的基础部分的知识的，文章顺序基本按照官方文档的顺序，每个知识点现附上代...

CompileYouth 2019-08-21 11:18 评论0 收藏0
Vue.js起手式+Vue小作品实战

摘要：本文是小羊根据文档进行解读的第一篇文章，主要内容涵盖的基础部分的知识的，文章顺序基本按照官方文档的顺序，每个知识点现附上代码，然后根据代码给予个人的一些理解，最后还放上在线编辑的代码以供练习和测试之用在最后，我参考上的一篇技博，对进行初入的本文是小羊根据Vue.js文档进行解读的第一篇文章，主要内容涵盖Vue.js的基础部分的知识的，文章顺序基本按照官方文档的顺序，每个知识点现附上代...

付伦 2019-08-01 16:07 评论0 收藏0
后端开发者的Vue学习之路（四）

摘要：文件是当前项目的首页文件。以后可能还会有全局注册组件等操作。在上面使用了这是一个预定义的路径，代表目录。而为了使用好这个实例，不要修改的，不然装载完内容后，对应的管理区域会指向不明，而导致渲染失败。目录上节内容回顾： npm 介绍安装常用命令：补充： ...

番茄西红柿 2019-04-23 11:51 评论0 收藏0
Vue.js基本语法的介绍

摘要：当表达式的值发生变化时，响应应用特定的行为到。指的是否重复，对重复的进行服用循环中，表示数组第个元素表示对象的样式绑定样式也可以根据中的变量来动态确定。介绍前段时间接触到一个库叫做Vue.js, 个人感觉很棒，所以整理了一篇博文做个介绍。Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层，可以很容易的和其他库整合。代码压缩后只有24kb...

Jensen 2019-08-21 10:48 评论0 收藏0
vue学习笔记（三）

摘要：直接创建组件使用标签名组件模板，根据组件构造器来创建组件。相应的，实例也被称为父组件。而且不允许子组件直接修改父组件中的数据，强制修改会报错。一、组件（一）什么是组件组件（Component）是 Vue.js最强大的功能之一。组件可以扩展 HTML元素，封装可重用的代码组件是自定义元素（对象）。（二）创建组件的两种方式官方推荐组件标签名是使用-连接的组合词，例如：。 1、使用...

fsmStudy 2019-08-21 17:14 评论0 收藏0