Hello！Vue.js組件

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

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

超簡(jiǎn)單的Vue.js組件入門

Vue組件 什么是vue組件？

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

如何使用vue組件？

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

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

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

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

初始化Vue.js的管理邊界

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

裝入組件

在頁(yè)面中嵌入

簡(jiǎn)單四步，完成一個(gè)組件的裝載流程：）

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

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

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

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

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

組件嵌套

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

父子組件通信

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

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

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

子組件通過props數(shù)據(jù)進(jìn)行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的值
               }
           }
});
//注冊(cè)父組件
Vue.component("father-component", Father);
//定義邊界
var vm = new Vue({
          el: "#app"
});

html

運(yùn)行效果：

兄弟組件通信
兄弟組件的通信是通過一個(gè)共同的父組件或者邊界來(lái)進(jìn)行橋接

創(chuàng)建兄弟組件

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

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

html:

運(yùn)行效果：