Vue学习记录-Vue组件基本使用。父子组件

2020年5月13日

<div id="app">
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
  </div>
  <script src="../js/vue.js">
  </script>
  <script>
    //ES6
    // `ck
    // sfa`

    //  1.创建组件构造器对象
    const cpnC = Vue.extend({
      template: `
      <div>
        <h2>标题</h2>
        <p>内容1</p>
        <p>内容2</p>  
      </div>
      `
    })

    // 2.注册组件
    Vue.component('my-cpn',cpnC);

     const app = new Vue({
        el: '#app',
        data: {
          message: 'hello'
        }
     })
  </script>

components: {
          //局部组件
          //cpn使用组件时的标签名
          cpn: cpnC
        }

父子组件：

<div id="app">
    <cpn2></cpn2>
  </div>
  <script src="../js/vue.js">
  </script>
  <script>
   
    //子组件
    const cpnC1 = Vue.extend({
      template: `
      <div>
        <h2>标题</h2>
        <p>内容1</p>
        <p>内容2</p>  
      </div>
      `
    })

    //父组件
    const cpnC2 = Vue.extend({
      template: `
      <div>
        <h2>标题2</h2>
        <p>内容1</p>
        <p>内容2</p>  
        <cpn1></cpn1>
      </div>
      `,
      components: {
          cpn1: cpnC1,
        }
    })

    //root组件
     const app = new Vue({
        el: '#app',
        data: {
          message: 'hello'
        },
        components: {
          cpn2: cpnC2
        }
     })
  </script>