父子组件，及组件的分离写法

最新推荐文章于 2023-07-13 19:44:55 发布

weixin_34356310

最新推荐文章于 2023-07-13 19:44:55 发布

阅读量208

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiaoxiaoyao/p/9183485.html

本文介绍了一种Vue组件的设计模式，通过实例演示了如何组织父子组件的结构与交互，包括数据传递与事件触发的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初学vue，关于组件的写法习惯于写在一起，怎么方便怎么来，一直觉得有问题，但是找不到较好的模板

大佬的博客

分析其代码中关于组件的写法，特此记录

代码如下：

<div id="example">
  <parent></parent>
</div>

<script>
var childNode = {
  template: `<button @click="incrementCounter">{{ counter }}</button>`,
  data(){
    return {
      counter: 0
    }
  },
  methods:{
    incrementCounter(){
      this.counter ++;
      this.$emit('increment');
    }
  },
}
var parentNode = {
  template: `
  <div class="parent">
    <p>{{total}}</p>
    <child @increment="incrementTotal"></child>
    <child @increment="incrementTotal"></child>
  </div>
  `,
  components: {
    'child': childNode
  },
  data(){
    return {
      'total':0
    }
  },
  methods:{
    incrementTotal(){
      this.total ++;
    }
  }
};
// 创建根实例
new Vue({
  el: '#example',
  components: {
    'parent': parentNode
  }
})
</script>