Hello！Vue.js組件

spacewander 發(fā)布于2019-08-20 12:13 / 1602人閱讀

摘要：超簡單的組件入門組件什么是組件在開發(fā)中，為了能讓一些頁面中的元素使用性和復(fù)用性更高我們可以將一些元素封裝成可用的一些組件或者是模板。然后通過嵌套的方式進行在頁面中嵌套使用，實現(xiàn)一種積木式編程。

超簡單的Vue.js組件入門

Vue組件 什么是vue組件？

在vue開發(fā)中，為了能讓一些頁面中的元素使用性和復(fù)用性更高我們可以將一些html元素封裝成可用的一些組件或者是模板。然后通過嵌套的方式進行在頁面中嵌套使用，實現(xiàn)一種積木式編程。

如何使用vue組件？

通過Vue.extend()聲明組件
Vue.extend是vue提供出來給我們實現(xiàn)組件的函數(shù)

//組裝組件（聲明組件）
var MyComponent = Vue.extend({
      //被封裝的html內(nèi)容
      template: "This is your first vue components!"，
      //綁定在這個組件內(nèi)的數(shù)據(jù)
      data: "",
      //監(jiān)聽這個組件的事件的方法
      methods: "",
      //屬性，通常被用來進行數(shù)據(jù)的通信
      props: ""
});

注冊組件——向vue核心容器注冊這個組件
這是為了讓vue更好的管理組件（復(fù)用和刪除）

Vue.component("my-component", MyComponent);
//注冊組件，傳入別名（my-component）和組件名稱（MyComponent）

初始化Vue.js的管理邊界

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

裝入組件

在頁面中嵌入

簡單四步，完成一個組件的裝載流程：）

已經(jīng)與Vue.js組件打了個照面，該問問它點什么了

Q1: 組件化除了視圖復(fù)用性更高以外的特殊作用？
讓一個組件具有自身獨立的功能——模塊化！>_

Q2: 如何在組件中進行js事件的綁定以及數(shù)據(jù)綁定？

var MyComponent = Vue.extend({
      template: "",
      methods: {
          searchList: function() {
              console.log("Your cause an event!");
          },
      },
      ready: function() {   //在模塊準(zhǔn)備就緒時觸發(fā)
                console.log("Loading Complete!");
      }，
      data: function() {  //這里進行數(shù)據(jù)綁定，注意，為了方便數(shù)據(jù)的預(yù)處理，組件中的data是通過函數(shù)返回的對象
                 return {
                        result: ""
                 }
      }
});

Q3：那都是通過一對一的綁定來實現(xiàn)數(shù)據(jù)同步的嗎？
No！有種羈絆叫做組件嵌套

組件嵌套

通過組件之間的相互嵌套來達到組件內(nèi)部的數(shù)據(jù)同步，并且這樣的機制有利于開發(fā)功能性組件（如輪播圖，搜索框，評論區(qū)等）

父子組件通信

父組件傳值給子組件——只要data發(fā)生改變

父組件的view發(fā)生改變，子組件的view也發(fā)生改變

值傳到子組件的方式是通過props屬性

子組件通過props數(shù)據(jù)進行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 ) {  //觸發(fā)事件的事件列表
                   this.message = event.target.value; //改變message的值
               }
           }
});
//注冊父組件
Vue.component("father-component", Father);
//定義邊界
var vm = new Vue({
          el: "#app"
});

html

運行效果：

兄弟組件通信
兄弟組件的通信是通過一個共同的父組件或者邊界來進行橋接

創(chuàng)建兄弟組件

通過父組件“橋梁函數(shù)”的“分發(fā)”，子組件分別得到model，并同步到自己的view中去
js腳本

//孿生哥哥
var twinsCompOld = Vue.extend({
  template: "I am the old brother, my age is  {{ title }}",
  props: ["title", "bridge"],//哥哥傳入控制年齡增長的回調(diào)函數(shù)
  methods: {
       GrowUp: function(event) {
              this.bridge(event.target.value);//將當(dāng)前的年齡傳入橋梁
       }
  }
});
//孿生弟弟
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; //因為執(zhí)行這個函數(shù)的是子組件，因此需要將父組件的指針保存一下
        return {
              say: "Daddy love you!",
              sonAge: 0,
              sendMessage: function( content ) { //橋梁函數(shù)
                self.sonAge = content;
                return self.sonAge;//兒子的年齡變化了
              }
        }
  }
});
//注冊父組件
Vue.component("father-component", Father);
//定義邊界
var vm = new Vue({
  el: "#app"
});

html:

運行效果：