父组件与子组件

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

使用子组件时，要在构造器中新建一个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>

版权声明：本文为jwz934738949原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。