Table of contents

1. Component basis

For components, my personal understanding is that each web page is actually composed of components, which can be understood as the constituent units of web page elements. Let's see how to load components into the page.

(1) Use import to introduce components
(2) Mount components
(3) Display components

For example:

(1) Create exercise1.vue file under compoments folder, exercise1.vue is the component

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

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

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

(2) We start to load components, (in the APP.vue file) divided into three steps:

import exercise1 from './compoments/exercise1.vue' imports components

components:{ exercise1 } mount components

<exercise1 /> display component

<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. Props component interaction

As the name suggests, it is the data interaction transmission between components.

//将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. Custom component interaction

Previously, data was passed from the parent component App.vue to the child component exercise.vue, and now we need to pass data from the child component to the parent component, which requires the use of custom components

<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---Basic knowledge of components

1. Component basis

2. Props component interaction

3. Custom component interaction

Guess you like