vue template 复用_vue-组件基础

1.基础介绍

vue的组件是以.vue结尾的，这是毋庸置疑的。vue的组件由三个部分组成<template>，<script>和<style>。

<template>
//template里面只能存在一个根组件
  <div></div>
</template>
<script>
export default {
  name: 'HelloWorld,//name属性首字母必须大写，一般与文件名相同。
  data(){ //data必须是一个函数
    return{
      msg:0
    }
  },
}
</script>
<style lang="less" scoped>
//可以写less语法，sass语法，scss语法，或者把lang去掉就是css语法
//scoped就是只能作用于当前组件，可以解决属性冲突
</style>

2.组件的复用

添加一个按钮实施复用

<template>
  <div>
    {{ msg }}
    <button @click="addCounterHandler">按钮</button>
  </div>
</template>
<script>
export default {
  name: 'Counter',
  data(){
    return{
      msg:0
    }
  },
  methods:{
    addCounterHandler(){
      this.msg++
    }
  }
}
</script>
<style scoped>
</style>

每个组件都会各自独立维护它的状态

<template>
  <div>
//复用
    <Counter />
    <Counter />
    <Counter />
  </div>
</template>
<script>
//引用按钮
import Counter from "./components/Counter"
export default {
  name: 'HelloWorld,
  components:{
  //依赖注入
    Counter
  }
}
</script>
<style scoped>

</style>

点击一个按钮不会影响其他按钮，每一个组件都是独立的实例状态，这就是复用。