Vue——组件化

Vue——组件化

---

1. 组件化的基本使用

1. 创建组件构造器
2. 注册组件
3. 使用组件

  <div id='app'>
    <cpn></Cpn>   //3. 使用 组件
  </div>
  <script>
    //1. 创建组件构造器
    const cpnC = Vue.extend({
      template: `<div><h2>我是标题</h2><p>哈哈哈</p><p>呵呵呵</p></div>`
    })
    //2. 注册 组件（这里注册是 全局组件）
    Vue.component('Cpn', cpnC)

    var app = new Vue({
      el: '#app',
      data: { message: 'give him some color look look' }
    })
  </script>

2. 全局组件 和 局部组件

  <div id='app'> <Cpn1></Cpn1> <Cpn2></Cpn2> </div>
  <script>
    //1. 创建组件构造器
    const cpnC = Vue.extend({
      template: `<div><h2>我是标题</h2><p>哈哈哈</p><p>呵呵呵</p></div>`
    })
    //2. 注册 组件(全局组件) 这里注册全局组件所有的实例都能使用
    Vue.component('Cpn1', cpnC)

    var app = new Vue({
      el: '#app',
      data: { message: 'give him some color look look' },
      components: {//这里注册的组件只能在这个实例上使用,在 #app 这个实例外边不可用
        Cpn2: cpnC
      }
    })
  </script>

3. 父组件 和 子组件

  <div id='app'>  <Cpn2></Cpn2>  </div>
  <script>
    //1. 创建第一个组件(子组件)
    const cpnC1 = Vue.extend({
      template: `<div><h2>我是标题</h2><p>哈哈哈</p></div>`
    })
    //2. 创建第二个组件(父组件)
    const cpnC2 = Vue.extend({
      template: `
        <div><h2>我是标题</h2><p>呵呵呵</p>
          <Cpn1></Cpn1>  //只能在第二个组件内部使用
        </div>
      `,
      components: { // 第1个组件在第2个组件内部注册
        Cpn1: cpnC1
      }
    })
    //实例可看做 root根组件
    var app = new Vue({
      el: '#app',
      data: { message: 'give him some color look look' },
      components: { Cpn2: cpnC2 }
    })
  </script>

4. 注册组件语法糖

  <div id='app'><Cpn1></Cpn1> <Cpn2></Cpn2> </div>
  <script>
    //语法糖注册全局组件
    Vue.component('Cpn1', {
      template: `<div><h2>我是标题</h2><p>哈哈哈</p></div>`
    })
    var app = new Vue({
      el: '#app',
      data: { message: 'give him some color look look' },
      //语法糖注册全局组件
      components: {
        'Cpn2': {
          template: `<div><h2>我是标题</h2><p>呵呵呵</p></div>`
        }
      }
    })
  </script>

5. 组件模板抽离 2 种方式

  <div id='app'> <Cpn1></Cpn1> <Cpn2></Cpn2>  </div>
  
  //<!-- 1. 通过script标签 ，注意类型：text/x-template -->
  <script type="text/x-template" id="cpnC1">
    <div><h2>我是标题</h2><p>哈哈哈</p></div>
  </script>
  
  //<!-- 2. 通过template标签 -->
  <template id="cpnC2">
    <div><h2>我是标题</h2><p>哈哈哈</p></div>
  </template>
  <script>
  
    //注册全局组件
    Vue.component('Cpn1', {//对应script标签id属性值
      template: '#cpnC1'
    })
    Vue.component('Cpn2', {//对应template标签id属性值
      template: '#cpnC2'
    })

    var app = new Vue({el: '#app',data: { message: 'give him some color look look' }})
  </script>

6. 组件 中的 data

1. 必须是一个 函数
2. 组件中，data作为一个函数名、数据对象作为函数返回值来使用。因为组件可能被用来创建多个实例。如果data仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供data函数，每次创建一个新实例后，我们能够调用data函数，从而返回初始数据的一个全新数据对象，所以多个组件实例就不会相互影响

  <div id='app'>
    <Cpn2></Cpn2>
    <Cpn2></Cpn2>//不管点击哪个实例的事件，只改变自己实例上的data
    <Cpn2></Cpn2>
  </div>

  <!-- 2. 通过template标签 -->
  <template id="cpnC2">
    <div>当前计数：{{title}}</br><button @click="add">+</button><button @click="sub">-</button></div>
  </template>
  <script>
    Vue.component('Cpn2', {
      template: '#cpnC2',
      data() { return { title: 0 } },
      methods: {
        add() { this.title++  },
        sub() { this.title-- }
      }
    })

    var app = new Vue({ el: '#app', data: { message: 'give him some color look look' } })
  </script>

7. 组件通信

1. 在父组件上通过v-bind绑定自定义属性
2. 子组件通过props中接收这个属性，并将其作为数据变量进行操作
3. <cpn :定义子组件接收时使用的属性名 = ‘父组件的数据变量’></cpn>

7.1 父组件向子组件传值（数组写法）

7.2 父组件向子组件传值（对象写法）

7.3 子组件向父组件传值（自定义事件）