1. 구성요소 기준

컴포넌트의 경우 각 웹 페이지는 실제로 컴포넌트로 구성되어 있으며 이는 웹 페이지 요소를 구성하는 단위로 이해할 수 있습니다.페이지에 컴포넌트를 로드하는 방법을 살펴보겠습니다.

(1) 가져오기를 사용하여 구성 요소 도입
(2) 구성 요소 탑재
(3) 구성 요소 표시

예를 들어:

(1) component 폴더 아래에 exercise1.vue 파일을 생성합니다. exercise1.vue는 컴포넌트입니다.

<template>
    <h1>我是组件</h1>
</template>

<script>
 export default{
    name:'1号'
 }
</script>

<style scoped>
h1{
    color: aqua;
}
</style>

(2) 구성 요소를 로드하기 시작합니다(APP.vue 파일에서). 세 단계로 나뉩니다.

import exercise1 from './compoments/exercise1.vue' 가져오기 컴포넌트

구성요소:{ 연습1 } 구성요소 마운트

<exercise1 /> 디스플레이 컴포넌트

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <exercise1 />
</template>

<script>

import exercise1 from './components/exercise1.vue'
export default {
  name: 'App',
  components: {
    exercise1
}
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2. 소품 구성 요소 상호 작용

이름에서 알 수 있듯이 구성 요소 간의 데이터 상호 작용 전송입니다.

//将App.vue中的kk键数据传递给exercise.vue

//App.vue
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <exercise :kk="vv" :k1="num" :k2="arr"/>
</template>

<script>

import exercise from './components/exercise.vue';
export default {
  name: 'App',
  data(){
    return{
        vv:'我是王鹏四五十',
        num:18,
        arr:[1,2,3,4,99,8888]
    }
  },
  components: {
    exercise
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>



//exercise.vue
<template>
    <h1>嘿嘿嘿</h1>
    <p>{
    
    { kk }}</p>
    <p> {
    
    { k1 }}</p>
    <ul>
        <li v-for="(i,index) in k2" :key="index">
           {
    
    { i }}
        </li>
    </ul>
</template>

<script>
export default{
    name:'一号',
    props:{
        kk:{//key就是传递的数据的键
            type:String,//类型
            default:""//默认值
        },
        k1:{
            type:Number,
            default:0
        },
        k2:{
            type:Array,
            default:function(){
                return []
            }
        }
    }
}

</script>

<style scoped></style>

3. 커스텀 컴포넌트 인터랙션

이전에는 부모 구성 요소 App.vue에서 자식 구성 요소 exercise.vue로 데이터가 전달되었지만 이제 자식 구성 요소에서 부모 구성 요소로 데이터를 전달해야 하므로 사용자 지정 구성 요소를 사용해야 합니다.

<template>
    <button @click="sendda">发送数据</button>
</template>

<script>
export default{
    name:'一号',
    data(){
        return{
            mess:'将我传递'
        }
    },
    methods:{
        sendda(){
           this.$emit("onEven",this.mess);
        }
    }
}

</script>

<style scoped></style>

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <exercise @onEven="getdata" />
  <p>{
    
    { me }}</p>
</template>

<script>

import exercise from './components/exercise.vue';
export default {
  name: 'App',
  data(){
    return{
      me:""
    }
  },
  components: {
    exercise
  },
  methods:{
    getdata(data){
      console.log(data);
      this.me=data;
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Vue---구성 요소에 대한 기본 지식

1. 구성요소 기준

2. 소품 구성 요소 상호 작용

3. 커스텀 컴포넌트 인터랙션

추천