父组件与子组件

最新推荐文章于 2023-12-01 20:32:51 发布

jwz934738949

最新推荐文章于 2023-12-01 20:32:51 发布

阅读量2.1k

点赞数

分类专栏： Vue基础

本文链接：https://blog.csdn.net/jwz934738949/article/details/107255936

版权

Vue基础专栏收录该内容

59 篇文章 1 订阅

订阅专栏

当一个组件中使用另一个组件的内容时，这个组件就被称为父组件，而被使用的组件就称为子组件。

使用子组件时，要在构造器中新建一个components属性，添加子组件相关的信息，便可以在父组件中使用子组件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父组件与子组件</title>
</head>
<body>
<div id="app">
  <cpn2></cpn2>
</div>

<script src="js/vue.js"></script>
<script>
  const cpn1C = Vue.extend({
    template: `
      <div>
        <h2>这是组件1</h2>
        <p>12345</p>
        <hr>
      </div>`
  })

  const cpn2C = Vue.extend({
    template: `
      <div>
        <h2>这是组件2</h2>
        <p>12345</p>
        <hr>
        <cpn1></cpn1>
      </div>`,
    components: {
      'cpn1': cpn1C
    }
  })

  const app = new Vue({
    el: '#app',
    components: {
      'cpn2': cpn2C
    }
  })
</script>
</body>
</html>