【Vue】Vue中的组件和组件构造器、全局组件和局部组件

目录

  • 前言
  • 组件:Vue.component()
  • 组件构造器:Vue.extend()
  • 全局组件
  • 局部组件

前言

首先,本篇文章是由一串错误的代码引出的…

//需求:实现父组件向子组件传递数据
<body>
  <div id="app">
    <child :message="parentMsg"></child>
  </div>

  <template id="child">
    <div>
      {{message}}
    </div>
  </template>

  <script>
    // 最初写法================================报错
    // Vue.component('child', {
    //   template: '#child',
    //   data() {
    //     return {}
    //   },
    //   props: {
    //     message: {
    //       type: String,
    //       default: 'aaaaaa'
    //     }
    //   }
    // })
    // ================================报错

    // 正确写法================================
    const child = Vue.extend({
      template: '#child',
      data() {
        return {}
      },
      props: {
        message: {
          type: String,
          default: 'aaaaaa'
        }
      }
    })
    // 正确写法================================

    const app = new Vue({
      el: "#app",
      data: {
        parentMsg: '我是父组件parentMsg'
      },
      methods: {
      },
      components: { child },
    })
  </script>
</body>

毫不意外,按照最初写法将出现的结果是一串爆红——vue.js:634 [Vue warn]: Failed to mount component: template or render function not defined.,意思是mount组件失败:模板或渲染函数没有定义。不要慌,有错误就会有解决办法,我们来研究一番!
【Vue】Vue中的组件和组件构造器、全局组件和局部组件_第1张图片
先来解释一下我最初为什么会这么写,有两点原因:

  1. 我知道Vue.component是创建组件的方式之一,但是我误以为它是简写方式(我写的时候还在寻思着,这也不简写吧,还是那么复杂,甚至有一瞬间我分不清这是组件还是组件构造器)——涉及知识范围:组件和组件构造器的区分
  2. 我分明清楚可以通过Vue.component来创建全局组件,而且全局组件不是所有组件都能使用的嘛?那么我就在根组件中components它为什么不可以嘞(我甚至还超级“理直气壮”!)——涉及知识范围:全局组件和局部组件的使用

我承认,有些离谱儿了~
请添加图片描述

OK,分析完错误原因之后,我们就来理一理它们之间的关系!

组件:Vue.component()

我们先来写一个组件的案例:

<body>
  <div id="app">
    <!-- 3、使用组件 -->
    <my-cpn></my-cpn>
  </div>
  <script>
    // 1、创建组件构造器对象
    const cpnC = Vue.extend({
      template: `
        

早上好!

中午好!

晚上好!

`
}) // 2、注册组件 Vue.component('my-cpn', cpnC) //根组件 const app = new Vue({ el: "#app", data: { }, methods: { }, }) </script> </body>

vue.js中创建组件有三大步骤:

  1. 定义组件 ——

    • 方式1:调用Vue.extend()创建的是一个组件构造器, 通常在创建组件构造器时,传入template代表我们自定义组件的模板,即const cpnC = Vue.extend({ template:' ' })
    • 方式2:使用Vue.component('组件名称',{ 组件构造器 })直接创建组件(全局组件)。
  2. 注册组件 ——

    • 全局组件:通过Vue.component('标签名', 组件名)注册组件时,组件的注册是全局的;
    • 局部组件:注册的组件是挂载在某个实例中,即:
	const app = new Vue({
      el: "#app",
      // 注册局部组件
      components: {
        // cpn使用组件时的标签名,cpnC组件名
        cpn: cpnC
      }
    })
  1. 使用组件 —— 在Vue实例的作用范围内使用组件。

组件构造器:Vue.extend()

extend创建的是一个组件构造器,而不是一个具体的组件实例,所以直接使用无法生效。
组件构造器相当于Vue.component()方法的第二个参数部分

组件构造器的正确打开方式(有效使用):

用法一:注册
【Vue】Vue中的组件和组件构造器、全局组件和局部组件_第2张图片
用法二:挂载

【Vue】Vue中的组件和组件构造器、全局组件和局部组件_第3张图片
组件构造器的简写形式:

//正常写法:
const child = Vue.extend({
      template: '#child',
      data() {
        return {}
      },
      props: {
        message: {
          type: String,
          default: 'aaaaaa'
        }
      }
})
//简写形式:
const child = {
      template: '#child',
      data() {
        return {}
      },
      props: {
        message: {
          type: String,
          default: 'aaaaaa'
        }
      }
    }

全局组件

方式一:通过构造器创建组件,通过Vue.component('标签名', 组件名)注册组件

<body>
  <div id="app">
    <!-- 3、使用组件 -->
    <my-cpn></my-cpn>
  </div>
  <script>
    // 1、创建组件构造器对象
    const cpnC = Vue.extend({
      template: `
        

早上好!

中午好!

晚上好!

`
}) // 2、注册全局组件 Vue.component('my-cpn', cpnC) //根组件 const app = new Vue({ el: "#app", data: { }, methods: { }, }) </script> </body>

方式二:使用Vue.component('组件名称',{ 组件构造器 })直接创建组件(全局组件)

<body>
  <div id="app">
    <cpn1></cpn1>
  </div>
  <script>
    // 1.创建组件构造器对象
    // const cpnC1 = Vue.extend()

    // 2.注册组件
    Vue.component('cpn1', {
      template: `
        

你好吗

你好嘛

你好么

`
}) // 根组件 const app = new Vue({ el: "#app", data: { }, methods: { }, }) </script> </body>

注意:

  • 全局注册要写在创建Vue实例对象前面;
  • 全局组件可以在vue实例绑定的dom节点下,直接写成自定义标签;
  • 全局组件可以在其他组件中直接使用,不需要引入,也不需要注册!!!

局部组件

<body>
  <div id="app">
    <!-- 3、使用组件 -->
    <cpn></cpn>
  </div>
  <script>
    // 1、创建组件构造器对象
    const cpnC = Vue.extend({
      template: `
        

早上好!

中午好!

晚上好!

`
}) //根组件 const app = new Vue({ el: "#app", data: { }, methods: { }, // 2、注册全局组件 components: { // cpn使用组件时的标签名 cpn: cpnC } }) </script> </body>

注意: 使用局部组件时,需要在components属性中注册才能使用!!!

如有误,请指正!
请添加图片描述

你可能感兴趣的:(Vue,vue.js,javascript,前端)