Vue组件与通信：6个实例解析组件应用

最新推荐文章于 2023-07-16 06:46:42 发布

tomorrownan

最新推荐文章于 2023-07-16 06:46:42 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： Vue 组件 js

本文链接：https://blog.youkuaiyun.com/w1418899532/article/details/88886062

本文详细介绍了Vue组件的创建、注册和通信方式，包括props、$ref、$emit的使用，以及子组件如何向父组件通信。通过6个实例展示了Vue组件的复用性和通信机制，帮助开发者更好地理解和运用Vue组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用Vue技术栈开发项目时，必不可少的会用到组件，不得不说，Vue的组件功能特别强大，使整个项目功能模块及各种view页面分类井井有条，对于我这种看到大堆代码就急躁的人很是友好了。

本文目录

1.Vue组件
2.组件注册(全局和局部)
3.动手创建一个组件
4.实现父子通信props(静态动态和传值类型)
5.实现父子通信$ref
6.实现子组件向父组件通信$emit
7.实现子向子组件的通信

1.Vue组件

组件是可复用的 Vue 实例,是一段可重用的UI，它封装了其中的所有行为和功能。
例如：Chrome的日期输入框（）就是浏览器提供的一个组件，只需要在使用的地方添加一个类型（type）为date的输入框（input），即：，就可以得到出现日期的功能。
组件使代码具有模块化、可重用性、易于维护。
可以使用独立可复用的小组件来构建大型应用，很多款应用的页面都可以抽象成一棵组件树。如下图

一个项目中通常只有一个根组件，比如App(<App>)组件。对于上图，根组件引用了layout组件，layout组件可以引用它的header、footer、content等组件。一些公共组件用于页面不同部分及不同页面的引用。

一个项目中只有一个实例化对象，就是new Vue的实例。如下代码：
```
 new Vue({
     
     
      el: document.getElementById('app'),
      components: {
     
      // 声明要用的组件们
        // key 是组件名，value 是组件对象，es6写法可省略key
       ComA，
       ComB，
      },
      template: `
        <div>
         <ComA> <ComA/>
         <ComB> <ComB/>
        </div>
      `
    })
```

2.组件注册

子组件注册成功以后才可以在父组件中引用。

全局注册
注册组件的时候，我们要给它一个组件名称，如注册一个全局组件语法格式如下：
```
Vue.component(componentName, options)
```
componentName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
```
<componentName></componentName>
```
全局组件在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。

局部注册
在实例选项中注册局部组件，这样组件只能在这个实例中使用。称为局部组件。

<div id="app">
    <ComponentA ></ComponentA >
</div>
 
<script>
var ComponentA= {
     
     
  template: '<h1>局部注册组件!</h1>'
}
 
// 创建根实例
new Vue({
     
     
  el: '#app',
  components: {
     
     
    ComponentA,
  }
})
</script>

在 ES2015+ 中，在对象中放一个类似 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写。

局部注册的组件在其子组件中不可用。
例如，如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：

var ComponentA = {
     
      /* ... */ }

var ComponentB = {
     
     
  components: {
     
     
    'component-a': ComponentA
  },
}

3.创建一个组件

我在Vue中创建一个button组件，button.vue组件部分代码如下：

<template lang="html">
	<div class="btn">
		<div class="btn-header">&nbsp&nbsp btn title</div>
		<div class="btn-body">&nbsp&nbspbtn body</div>
		<div class="btn-content">&nbsp&nbspbtn content</div>
	</div>

</template