Vue组件一

组件使用的基本步骤：

• 创建组件构造器
  • 调用Vue.extend()的方法创建组件构造器
• 注册组件
  • 调用Vue.component()方法注册组件
• 使用组件
  • 在Vue实例的作用范围内使用组件
  • ndis

//早期写法
<div id="app">
    <!-- 3.使用组件 -->
    <my-cpn></my-cpn>
  </div>
  <script src="Js/vue.js"></script>
  <script>
    //1. 创建组件构造器
    const myComponent = Vue.extend({
      template:
        `<div>
          <h3>我是标题</h3>
          <p>我是内容</p>
        </div>`  
     });
    // 2.注册组件，并且定义组件标签的名称
    Vue.component('my-cpn',myComponent)

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

全局组件：按以上方式创建的就是全局组件

全局组件可以在多个Vue的实例下使用

局部组件只能在创建的实例下使用，创建方法如下：

 // 创建局部组件
    const app = new Vue({
      el: '#app',
      data: {
        message: 'nihao'
      },
      components: {
        cpn: myComponent
      },
    })

 父组件,子组件：

注册组件的语法糖方式：省去了Vue.extend()的步骤，而是直接使用一个对象来代替

全局组件：

 // const myComponent = Vue.extend({
    //   template:
    //     `<div>
    //       <h3>组件注册语法糖写法</h3>
    //       <p>我是内容</p>
    //    </div>
    // })
    // 全局组件注册语法糖写法
    Vue.component('my-cpn', {
      template:
        `<div>
          <h3>全局组件注册语法糖写法</h3>
          <p>我是内容</p>
       </div>
      `
    })

局部组件：

const app = new Vue({
      el: '#app',
      data: {
        message: '你好'
      },
      components: {
        'my-cpn': {
          template:
            `<div>
              <h3>局部组件注册语法糖写法</h3>
              <p>我是内容</p>
            </div>`
        }
      }
    })

 

const app = new Vue({

      el: '#app',

      data: {

        message: '你好'

      },

      components: {

        'my-cpn': {

          template:

            `<div>

              <h3>局部组件注册语法糖写法</h3>

              <p>我是内容</p>

            </div>`

        }

      }

    })