components的几种方式

components 组件

• 创建一个单独的 .vue文件，引入这个文件

//main.js

import Demo from "./Demo"; //引入这个文件，也叫组件

import Vue from "vue/dist/vue.common";

Vue.config.productionTip = false;

const vm = new Vue({
  components:{
    frank:Demo
  },
  data() {
    return {
      n: 0,
    };
  },
  template: `
    <div class="red">
      {{n}}
      <button @click="add">+1</button>
      <frank/> //重点
    </div>
  `,
  methods: {
    add() {
      this.n += 1;
    }，
  },
}).$mount("#app1");

//Demo.vue
<template>
  <div>
    <div class="red">
      frank
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      n:0
    }
  },
  methods:{
    add(){
      this.n +=1
    }
  }
}
</script>

<style scoped>
  .red{
    color: red;
  }
</style>

• 在main.js文件中创建 可以理解为给template生成了一个实例

import Vue from "vue/dist/vue.common";

Vue.config.productionTip = false;

Vue.component("Demo2", {
  template: `
  <div>demo2</div>
`,
});

const vm = new Vue({
  components:{
    frank:Demo
  },
  data() {
    return {
      n: 0,
      array: [1, 2, 3, 4, 5, 6, 7, 8],
    };
  },
  template: `
    <div class="red">
      {{n}}
      <button @click="add">+1</button>
      <Demo2/> //这里
      <hr>
      {{filter(array)}}
    </div>
  `,
  methods: {
    add() {
      this.n += 1;
    },
    filter() {
      console.log("执行了");
      return this.array.filter((i) => i % 2 === 0);
    },
  },
}).$mount("#app1");