Vue---Conocimiento básico de componentes

Tabla de contenido

1. Base de componentes

2. Interacción de componentes de utilería

3. Interacción de componentes personalizados

---

1. Base de componentes

Para los componentes, mi entendimiento personal es que cada página web en realidad está compuesta de componentes, que pueden entenderse como las unidades constituyentes de los elementos de la página web. Echemos un vistazo a cómo cargar componentes en la página.

(1) Usar importar para introducir componentes
(2) Montar componentes
(3) Mostrar componentes

Por ejemplo:

(1) Cree el archivo exercise1.vue en la carpeta de componentes, exercise1.vue es el componente

 

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

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

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

(2) Empezamos a cargar componentes, (en el archivo APP.vue) divididos en tres pasos:

importar ejercicio1 desde './compoments/exercise1.vue' importa componentes

componentes:{ ejercicio1 } componentes de montaje

<ejercicio1 /> componente de visualización

<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. Interacción de componentes de utilería

Como sugiere su nombre, es la transmisión de interacción de datos entre componentes.

//将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. Interacción de componentes personalizados

Anteriormente, los datos se pasaban del componente principal App.vue al componente secundario exercise.vue.Ahora necesitamos pasar datos del componente secundario al componente principal, lo que requiere el uso de componentes personalizados.

<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>