3-1.vue的组件component:组件的基本使用

3-1.vue的组件component:组件的基本使用标题

vue组件的作用

组件的含义其实就是对一些功能进行封装。vue的项目开发都是以组件化的形式去开发的,一个项目一般都是划分成多个组件,然后拼接而成的。

1.代码展示(最原始的实现方式,不建议这样写)

<body>
  <div id='app'>
    
    <cpn>cpn>
  div>

  <template id='cpn'>
    <div>
      这是组件的数据
    div>
  template>

  <script>
    // 1.创建组件实例
    const component1 = Vue.extend({
      template: '#cpn'
    });

    //2。注册组件
    Vue.component('cpn',component1);


    const app = new Vue({
      el: '#app',
      data: {
        count: 10
      }
    });
  script>

body>

2.过程分解

3-1.vue的组件component:组件的基本使用_第1张图片

全局组件和局部组件

全局组件可以在任何vue的实例里面使用,而局部组件组能在其注册的vue实例里面使用

1.代码展示

<body>
  <div id='app'>
    
    <cpn1>cpn1>
    
    <cpn2>cpn2>
  div>

  <template id='cpn1'>
    <div>
      这是全局组件
    div>
  template>

  <template id='cpn2'>
    <div>
      这是局部组件
    div>
  template>

  <script>
    // 创建组件实例1
    const component1 = Vue.extend({
      template: '#cpn1'
    });
    // 创建组件实例2
    const component2 = Vue.extend({
      template: '#cpn2'
    });

    //全局注册
    Vue.component('cpn1',component1);


    const app = new Vue({
      el: '#app',
      data: {
        count: 10
      },
      // 局部注册
      components: {
        cpn2: component2
      }
    });
  script>

body>

2.过程分解

3-1.vue的组件component:组件的基本使用_第2张图片

局部组件最简写的方式(推荐使用)

<body>
  <div id='app'>
    <cpn>cpn>
  div>

  <template id='cpn'>
    <div>
      这是组件
    div>
  template>

  <script>

    // 一步到位  
    const cpn = {
      template: "#cpn"
    }

    const app = new Vue({
      el: '#app',
      data: {
        count: 10
      },
      // 局部注册
      components: {
        cpn
      }
    });
  script>

body>

你可能感兴趣的:(vue,vue)