码上掘金 里面 嵌入自定义组件，可以用做组件demo演示

​

需求

将写的组件演示出来，默认 码上掘金 不能 嵌入组件。

解决问题

选择自定义模板，所有代码都写在html里面，加入Vue就ok了

添加script依赖

​​https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js​​

代码演示

<div id="app">
  <div class="count" @click="addCount">click me {{count}}</div>
  <my-compo></my-compo>
</div>

<template id="MyCompo">
  <div>
    <h1 style="color:red">我是组件 kk: {{ kk }}</h1>
    <div class="count"
         @click="addCount">
          我是组件 kk: click me {{ kk }}
          </div>
   </div>
</template>
<script>
  var MyCompo = {
    template: '#MyCompo',
    data() {
      return {
        kk: 1,
      }
    },
    methods: {
      addCount() {
        this.kk += 1;
      },
    },
  }

  var app = new Vue({
  el: '#app',
  components: {
    'my-compo': MyCompo
  },
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    addCount() {
      this.count += 1;
    },
  },
  mounted () { },
})

</script>

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

---------------------------------------------
生活的意义并不是与他人争高下，而在于享受努力实现目标的过程，结果是对自己行动的嘉奖。
↑面的话，越看越不痛快，应该这么说：

生活的意义就是你自己知道你要做什么，明确目标。没有目标，后面都是瞎扯！

新博客 ​​​https://www.VuejsDev.com​​ 用于梳理知识点