第10讲：Vue组件的定义与注册

定义组件

  1. 在程序的 components 目录下新建一个名为 Child.vue 的文件

  2. 在文件内键入如下代码

  新建的 Child .vue 文件即为我们定义的组件， 文件的位置一般放在 src 目录下的 components 目录下

在App.vue文件内注册Child.vue组件

  1. 首先将组件引入到 App.vue 文件内

import Child from './components/Child'

  注意：组件引入时不需要使用后缀名.vue

  2. 在 App.vue 模块内添加一个名为 components 的属性

  3. 将组件注册到 App.vue 文件内

components: {

        Child

}

  4. 在 template 标签内使用 Child 组件

< Child />

Vue组件之间的传值

父子组件通信

如何定义父子组件？

将其他组件以import引入用自定义标签接收，在当前组件中component里注册该标签，页面上可以直接用<自定义标签>样子使用。当前组件为父组件，被引入的组件为子组件。

父组件向子组件传值

一般在子组件内定义props来做接收 即：

  props: [

       'msg'

  ]

  Child .vue 文件代码变更如下：

  定义好 props 之后我们可以在父组件传递 props 参数

父组件代码如下

子组件向父组件传值

  子组件通过调用 this.$emit() 方法向父组件传值

  基本语法：

  this.$emit('func', param)

  func: 为父组件中绑定的函数名，可自定义

  param: 为要传递的参数

 

  其中 funcHandle 需在父组件中定义好相应的方法，该方法接收一个或多个参数

  funcHandle(val) {

      this.msg = val

  }

子组件修改代码如下：

this.$emit('parentFunc',this.title);

父组件修改代码如下：

methods:{

        receFunc(val){

            this.title = val

        }

    }

Child.vue完整代码

parent.vue完整代码

本人从事软件项目开发20多年，2005年开始从事Java工程师系列课程的教学工作，录制50多门精品视频课程，包含java基础，jspweb开发，SSH,SSM，SpringBoot，SpringCloud,人工智能，在线支付等众多商业项目，每门课程都包含有项目实战，上课PPT，及完整的源代码下载，有兴趣的朋友可以看看我的在线课堂

讲师课堂链接：https://edu.csdn.net/lecturer/893