Hello！Vue.js组件

2019年8月31日 101次阅读 来源: shockw4ver

超简朴的Vue.js组件入门

Vue组件

什么是vue组件？

在vue开辟中，为了能让一些页面中的元素运用性和复用性更高我们能够将一些html元素封装成可用的一些组件或许是模板。然后经由过程嵌套的体式格局举行在页面中嵌套运用，完成一种积木式编程。

怎样运用vue组件？

  1. 经由过程Vue.extend()声明组件
    Vue.extend是vue供应出来给我们完成组件的函数

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

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

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

  1. 初始化Vue.js的治理边境

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

  1. 装入组件

在页面中嵌入
<div id="app">
    <my-component></my-component>
</div>

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

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

  • Q1: 组件化除了视图复用性更高之外的特殊作用？
    让一个组件具有本身自力的功用——模块化！>_<!!!

  • Q2: 怎样在组件中举行js事宜的绑定以及数据绑定？

var MyComponent = Vue.extend({
      template: '<p></p>',
      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: '<p>{{ content }}</p>',
          props: ['content']
});
var Father = Vue.extend({
          template: '<div><child :content='message'></child><input type="text" @change="sendMessage( $event );"/></div>',//将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

<div id="app">
    <father-component></father-component>
</div>

运转结果：
《Hello！Vue.js组件》

  • 兄弟组件通讯
    兄弟组件的通讯是经由过程一个配合的父组件或许边境来举行桥接

    • 建立兄弟组件

    • 经由过程父组件“桥梁函数”的“分发”，子组件离别获得model，并同步到本身的view中去
      js剧本

//孪生哥哥
var twinsCompOld = Vue.extend({
  template: '<p>I am the old brother, my age is  {{ title }}<input type="number" @change="GrowUp( $event )"></p>',
  props: ['title', 'bridge'],//哥哥传入掌握岁数增进的回调函数
  methods: {
       GrowUp: function(event) {
              this.bridge(event.target.value);//将当前的岁数传入桥梁
       }
  }
});
//孪生弟弟
var twinsCompLittle = Vue.extend({
  template: '<p>I am the little brother, my age is {{ title }}</p>',
  props: ['title']//同步岁数
});
//父亲
var Father = Vue.extend({
  template: '<div>{{ say }}<oldBrother :title="sonAge" :bridge="sendMessage"></oldBrother><littleBrother :title="sonAge"></littleBrother></div>',
  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:

<body>
    <father-component></father-component>
</body>

运转结果：
《Hello！Vue.js组件》

    原文作者：shockw4ver
    原文地址: https://segmentfault.com/a/1190000007445826
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞