Vue 학습 기록을 위한 구성 요소 캡슐화 방법 요약

방법 1: 구성 요소 디렉토리에 공용 구성 요소 파일, 중요 참조를 만들고 구성 요소에 등록(글로벌 등록)

ComponentsPractice.vue 커스텀 컴포넌트

<template>

  <div>
    <p>组件封装方法一</p>
    <button @click="show">我是组件封装按钮</button>
  </div>

</template>

<script>
export default {
  name: 'ComponentsPractice',
  methods: {
    show () {
      alert('vue组件封装粗尝试')
    }
  }
}
</script>

<style scoped>
</style>

 

구성 요소는 configTest.vue 페이지를 사용합니다.

<template>

  <div>
    <p>组件封装方法一</p>
    <button @click="show">我是组件封装按钮</button>
  </div>

</template>

<script>
export default {
  name: 'ComponentsPractice',
  methods: {
    show () {
      alert('vue组件封装粗尝试')
    }
  }
}
</script>

<style scoped>
</style>

방법 2: 부분 등록

<template>
  <blog-post post-title="hello holy ">1212</blog-post>
</template>

<script>
import Vue from 'vue'
export default {

}

// 组件注册
Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{
   
   {title}}</h3>'

})
</script>