vue---组件基本知识

目录

一、组件基础

二、Props组件交互

三、自定义组件交互

---

一、组件基础

对于组件，我个人的理解是每个网页其实都是由一个个组件组成的，它可以理解成网页元素的组成单位，下面我们来看下如何将组件加载到页面中。

（1）使用import引入组件
（2）挂载组件
（3）显示组件

例如：

（1）在compoments文件夹下创建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'    引入组件

compoments:{ exercise1 }                                                 挂载组件

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

 

二、Props组件交互

顾名思就是组件之间的数据交互传递。

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

 

三、自定义组件交互

之前是从父组件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>