Vue 커스텀 컴포넌트

이번에는 Vue Custom Component를 들고 왔습니다. Vue Custom Component의 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

Vue 컴포넌트 작성

아래에 작성하는 내용은 webpack을 기반으로 구축된 프로젝트인 .vue로 끝나는 단일 파일 컴포넌트를 작성하는 방법입니다. 여전히 webpack을 사용하여 vue 프로젝트를 빌드하는 방법을 모른다면 vue-cli로 이동할 수 있습니다.

완전한 Vue 구성 요소에는 다음 세 부분이 포함됩니다.

1. template: template

2. js: logic

3. css: style

각 구성 요소에는 자체 템플릿, js 및 스타일이 있습니다. 한 페이지를 집에 비유한다면 그 집 안의 거실, 침실, 부엌, 화장실 등이 구성요소입니다. 주방을 따로 빼내면 칼, 레인지후드 등이 구성품이 될 수 있습니다. 즉, 페이지는 구성 요소로 구성되고 구성 요소는 구성 요소로 구성될 수도 있습니다. 이는 매우 유연하며 결합도가 매우 낮습니다.

먼저 .vue 파일에서 구성 요소가 어떻게 작성되는지 살펴보겠습니다.

Vue.component('simple-counter', {
 template: '<p id="inputBox"><input type="text"></p>',
 data () {   // 数据
 return {
  counter: 0
 }
 },
 methods: {
 // 写点方法
 },
 created () {
 // 生命钩子
 },
 computed: {
 // 计算属性
 }
})

템플릿은 무엇에 사용되나요?

<template>
 <p id="inputBox">
 <input type="text">
 </p>
</template>
<!--
template就是这个组件的html，也就是下面部分（vue-loader会将template标签下的内容解析出来）：
-->
<p id="inputBox">
 <input type="text">
</p>
<!--
 对应原生写法的话，就是template内的dom字符串
-->

js part

export default {
 data () {
 return {
  counter: 0
 }
 },
 methods: {
 // 方法
 },
 created () {
 // 生命钩子
 },
 computed: {
 // 计算属性
 }
}
// 在这里很明显js部分就是对应的原生写法内的非template部分了。
// export default这个是es6的模块写法，不懂的可以先去了解es6的模块化

css part

<style lang="scss" scoped>
...样式
</style>

소개

이 구성 요소를 다른 구성 요소에서 참조하는 방법은 무엇입니까?

컴포넌트 1(button.vue)

<template>
 <p class="button">
 <button @click="onClick">{{text}}</button>
 </p>
</template>
<script>
export default {
 props: ['text'],   // 获取父组件的传值
 data () {
 return {
 }
 },
 methods: {
 onClick () {
  console.log('点击了子组件')
 }
 }
}
</script>
<style lang="scss" scoped>
.button {
 button {
 width: 100px;
 }
}
</style>

컴포넌트 2(box.vue)

<template>
 <p class="box">
 <v-button :text="text"></v-button>    <!--使用组件并传值（text）-->
 </p>
</template>
<script>
import Button from './button.vue'  // 引入子组件
export default {
 components: {
 'v-button': Button
 },
 data () {
 return {
  text: '按键的name'
 }
 },
 methods: {
 }
}
</script>

이 글의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 내용을 보려면 주목해 주세요. 기타 관련 기사는 PHP 중국어 웹사이트에 있습니다!

추천 자료:

Angular 프로젝트에서 scss를 사용하는 방법

Vue의 패키징 최적화 방법은 무엇입니까

위 내용은 Vue 커스텀 컴포넌트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!