vue封裝組件js實例分析

本文小編為大家詳細介紹“vue封裝組件js實例分析”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue封裝組件js實例分析”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

什么是組件化：

組件化就是將一個頁面拆分成一個個小的功能模塊，每個功能模塊完成屬于自己這部分獨立的功能，使得整個頁面的管理和維護變得非常容易。

Vue組件化思想

• 組件化是Vue中的重要思想，當我們對vue的基本知識有了一定的基礎就要開始封裝組件了

它提供了一種抽象，讓我們可以開發出一個個獨立可復用的小組件來構造我們的應用。組件樹。

• 組件化思想的應用

1.在項目中充分利用組件化的思想

2.盡可能的將也頁面拆分成一個個小的可復用的組件

3.好處：代碼更加方便組織和管理，擴展性也更強

一.注冊組件的基本步驟

下面我們用一個封裝一個Element Ui 的輸入框組件為例，貫徹全文

組件的使用分成三個步驟

1.創建組件構造器c-input

組件的模板 template

注意：只能有一個根元素，否則警告報錯

1 template 可以是字面量字符串，缺點是沒有高亮，內置在 JavaScript 中，寫起來麻煩

2 template 可以寫在 script 標簽中，雖然解決了高亮的問題，但是也麻煩

3 以上方式都不好，我們最終的解決方案是使用 Vue 的 .vue 單文件組件來寫。（webpack）

但是要想使用這種方式必須結合一些構建工具

<template>
      <el-input >
      </el-input>
</template>

2.注冊組件

注冊組件 分為 局部注冊 與 全局注冊，下一章再講

......使用代碼.........
import cInput from "組件地址/c-ipunt.vue";
export default {
  components: {cInput},
.......

3.父組件使用

<template>
  <c-ipunt/>
</template>
<script>
import cInput from "組件地址/c-ipunt.vue";
export default {
  components: {cInput},
.......
</script>

二.豐富組件

組件是獨立的作用域，就像我們 Node 中的 JavaScript 模塊一樣，獨立的

組件其實就是一個特殊的 Vue 實例，可以有自己的 data、methods、computed、watch 等等選項

組件的 data 必須是函數
函數中返回一個對象作為組件的 data

<template>
      <el-input >
      </el-input>
</template>
<script>
export default {
  name: 'c-input',
  model: {
    prop: 'value',
    event: 'input',
  },
  props: {
  },
  data() {
    return {
    }
  },
  watch: {
  },
  methods: {
  },
  mounted() {
  },
}
</script>
<style scoped>
</style>

三.父子組件間的通訊

1.父---->子通信 [props Down]

父組件通過 props 向下傳遞數據給子組件

所以子組件要定義接收的參數

我們可以看到Element Ui 的輸入框組件，有這些屬性我們可以重新定義封裝

<template>
      <el-input :disabled="disabled" ref="input" :placeholder="placeholder" 
        :type="type" :auto-complete="autocomplete">
      </el-input>
</template>
<script>
export default {
  name: 'c-input',
  model: {
    prop: 'value',
    event: 'input',
  },
  props: {
    labelwidth: {
      type: String,
      default: undefined,
    },
    autosize: {
      default() {
        return { minRows: 2, maxRows: 4 }//如果不使用這個屬性的默認值
      },
    },
    inputCss: {
      type: String,
      default: '',
    },
    label: {
      type: String,
      default: '',
    },
    value: {
      default: undefined,
    },
    prop: {
      type: String,
      default: null,
    },
    placeholder: {
      type: String,
      default: undefined,
    },
    required: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
    },
    type: {
      type: String,
      default: undefined,
    },
    autocomplete: {
      type: String,
      default: 'on',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    span: {
      type: Number,
    },
  },
  data() {
    return {
    }
  },
  watch: {
  },
  methods: {
  },
  mounted() {
  },
}
</script>
<style scoped>
</style>

父組件使用

<template>
    <c-input label="用戶名" :span="12" />
</template>
<script>
import cInput from "組件地址/c-ipunt.vue";
export default {
  components: {cInput},
.......
</script>

2. 子----> 父傳值 [Events Up]

子組件通過 events 給父組件發送消息，實際上就是子組件把自己的數據發送到父組件。

在 element ui 的 el-input中是有@input.native="updateValue($event.target.value)" 獲取現在輸入值 @keyup.enter.native="handleEnter" 回車 @focus="focus" 得到焦點 等事件的

<template>
      <el-input :disabled="disabled" ref="input" :placeholder="placeholder" 
        :type="type" :auto-complete="autocomplete"    @input.native="updateValue($event.target.value)" @keyup.enter.native="handleEnter"  @focus="focus">
      </el-input>
</template>
<script>
export default {
  name: 'c-input',
  model: {
    prop: 'value',
    event: 'input',
  },
  props: {
    labelwidth: {
      type: String,
      default: undefined,
    },
    autosize: {
      default() {
        return { minRows: 2, maxRows: 4 }//如果不使用這個屬性的默認值
      },
    },
    inputCss: {
      type: String,
      default: '',
    },
    label: {
      type: String,
      default: '',
    },
    value: {
      default: undefined,
    },
    prop: {
      type: String,
      default: null,
    },
    placeholder: {
      type: String,
      default: undefined,
    },
    required: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
    },
    type: {
      type: String,
      default: undefined,
    },
    autocomplete: {
      type: String,
      default: 'on',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    span: {
      type: Number,
    },
  },
  data() {
    return {
    }
  },
  watch: {
  },
  methods: {
     updateValue(val) {
      this.$emit('input', val)
    },
    handleEnter() {
      this.$emit('keyup-enter')
    },
    focus() {
      this.$emit('focus')
    },
  },
  mounted() {
  },
}
</script>
<style scoped>
</style>

父組件使用

<template>
    <c-input label="用戶名" :span="12" @keyup-enter="mykeyupEnter" @focus="myfocus"/>
</template>
<script>
import cInput from "組件地址/c-ipunt.vue";
export default {
  components: {cInput},
.......
  methods: {
mykeyupEnter(){
console.log("我是父組件的輸入框回車")},
myfocus(){
console.log("我是父組件的輸入框得到焦點")
}
},
......
</script>

3. 子<----> 父 雙向傳值

我們知道Vue的核心特性之一是雙向綁定，

v-model是一個指令用來實現雙向綁定，限制在<input>、<select>、<textarea>、components中使用，修飾符.lazy(取代input監聽change事件)、.number(輸入字符串轉為有效的數字)、.trim(輸入首尾空格過濾)。那么我們封裝的組件怎么進行雙向綁定呢。

• 首先 props添加一個value，接收父組件的數據變化。

• 再添加一個value的監聽，監聽父組件的數據變化。

• 而子組件數據變化的時候會出發這個事件@input.native=""，所以這個時間觸發this.$emit('input',val)，向父組件傳遞 子組件的數據變化

<template>
      <el-input :disabled="disabled" ref="input" :placeholder="placeholder" 
        :type="type" :auto-complete="autocomplete"    @input.native="updateValue($event.target.value)" @keyup.enter.native="handleEnter"  @focus="focus"  v-model="modelValue">
      </el-input>
</template>
<script>
export default {
  name: 'c-input',
  model: {
    prop: 'value',
    event: 'input',
  },
  props: {
    labelwidth: {
      type: String,
      default: undefined,
    },
    autosize: {
      default() {
        return { minRows: 2, maxRows: 4 }//如果不使用這個屬性的默認值
      },
    },
    inputCss: {
      type: String,
      default: '',
    },
    label: {
      type: String,
      default: '',
    },
    value: {
      default: undefined,
    },
    prop: {
      type: String,
      default: null,
    },
    placeholder: {
      type: String,
      default: undefined,
    },
    required: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
    },
    type: {
      type: String,
      default: undefined,
    },
    autocomplete: {
      type: String,
      default: 'on',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    span: {
      type: Number,
    },
  },
  data() {
    return {
      modelValue: undefined,
    }
  },
  watch: {
    value: {
      handler(newValue) {
        this.modelValue = newValue
      },
      immediate: true,
    },
  },
  methods: {
     updateValue(val) {
      this.$emit('input', val)
    },
    handleEnter() {
      this.$emit('keyup-enter')
    },
    focus() {
      this.$emit('focus')
    },
  },
  mounted() {
  },
}
</script>
<style scoped>
</style>

使用

<template>
    <c-input label="用戶名" :span="12" @keyup-enter="mykeyupEnter" @focus="myfocus" v-model="myName"/>
</template>
<script>
import cInput from "組件地址/c-ipunt.vue";
export default {
  components: {cInput},
  data() {
    return {
myName: undefined,
}},
.......
  methods: {
mykeyupEnter(){
console.log("我是父組件的輸入框回車")},
myfocus(){
console.log("我是父組件的輸入框得到焦點")
}
},
......
</script>

四.slot插槽

什么是插槽？

插槽（Slot）是Vue提出來的一個概念，正如名字一樣，插槽用于決定將所攜帶的內容，插入到指定的某個位置，從而使模板分塊，具有模塊化的特質和更大的重用性。

插槽顯不顯示、怎樣顯示是由父組件來控制的，而插槽在哪里顯示就由子組件來進行控制

怎么用插槽？

默認插槽

父組件

<template>
  <div>
    我是父組件
    <slotOne1>
      <p >我是父組件插槽內容</p>
    </slotOne1>
  </div>
</template>

在父組件引用的子組件中寫入想要顯示的內容（可以使用標簽，也可以不用）

子組件(slotOne1)

<template>
  <div class="slotOne1">
    <div>我是slotOne1組件</div>
    <slot></slot>
  </div>
</template>

在子組件中寫入slot，slot所在的位置就是父組件要顯示的內容

具名插槽

子組件

<template>
  <div class="slottwo">
    <div>slottwo</div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

在子組件中定義了三個slot標簽，其中有兩個分別添加了name屬性header和footer

父組件

<template>
  <div>
    我是父組件
    <slot-two>
      <p>啦啦啦，啦啦啦，我是賣報的小行家</p>
      <template slot="header">
          <p>我是name為header的slot</p>
      </template>
      <p slot="footer">我是name為footer的slot</p>
    </slot-two>
  </div>
</template>

在父組件中使用template并寫入對應的slot值來指定該內容在子組件中現實的位置（當然也不用必須寫到template），沒有對應值的其他內容會被放到子組件中沒有添加name屬性的slot中

作用域插槽

子組件

<template>
  <div>
    我是作用域插槽的子組件
    <slot :data="user"></slot>
  </div>
</template>
<script>
export default {
  name: 'slotthree',
  data () {
    return {
      user: [
        {name: 'Jack', sex: 'boy'},
        {name: 'Jone', sex: 'girl'},
        {name: 'Tom', sex: 'boy'}
      ]
    }
  }
}
</script>

在子組件的slot標簽上綁定需要的值

父組件

<template>
  <div>
    我是作用域插槽
    <slot-three>
      <template slot-scope="user">
        <div v-for="(item, index) in user.data" :key="index">
        {{item}}
        </div>
      </template>
    </slot-three>
  </div>
</template>

在父組件上使用slot-scope屬性，user.data就是子組件傳過來的值

讀到這里，這篇“vue封裝組件js實例分析”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。