vue组件及注册

目录

1.vue组件定义：

 2.组件3要素：

2.1、< template >

2.2、< script >

2.3. < style>

3.组件注册：

3.1全局注册

3.2 局部注册

---

1.vue组件定义：

    官方定义：组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

    组件机制的设计，可以让开发者把一个复杂的应用分割成一个个功能独立组件，降低开发的难度的同时，也提供了极好的复用性和可维护性。组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。组件化和模块化的视角不同：

模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用。
    可复用组件，高内聚、低耦合。Vue中提供了少量的内置组件(keep-alive、component、transition、transition-group等)，但可以自定义组件。Vue API中，提供了Vue.extend和Vue.component两个全局方法创建/注册组件，还有一个实例选项components，用来注册局部组件。

 
2.组件3要素：

2.1、< template >

     在Vue中template模板是用于编写视图(DOM)的地方，<template></template>一般只有一个根元素，通常根元素都是div。如果有多个根元素需要使用v-if、v-else、v-else-if设置成只显示其中一个根元素；（template标签不支持v-show指令，v-show="false"对template标签来说不起作用。

<template>
	<div>
		<p>1.获取原生DOM元素</p>
		<h1 id="ha" ref="mao">aaaa</h1>
		<MyDemo ref="ad"></MyDemo>
		<p>立马更新</p>
		<p ref="add">{{count}}</p>
		<button @click="addNum">+1</button>
		<hr />
		<MyTick></MyTick>
	</div>
</template>

2.2、< script >

    vue中的script脚本中包含两部分，导出和导入。

<script>
	import MyDemo from './components/child/MyDemo.vue'
	import MyTick from './components/MyTick.vue'
	export default {
		components: {
			MyDemo,
			MyTick
		},
		mounted() {
			console.log(document.getElementById("ha"));
			console.log(this.$refs.mao)
			let demoObj = this.$refs.ad;
			demoObj.fn()
		},
		methods: {
			addNum() {
				this.count++;
				console.log(this.$refs.add.innerHTML);
				this.$nextTick(() => {
					console.log(this.$refs.add.innerHTML);
				})
			}
		},

		data() {
			return {
				count: 0
			}
		}
	}
</script>

2.3. < style>

     style里和传统的css差不多，不同的是支持了更多的语法，比如scss、less、stylus等，默认是css。
 

<!--样式默认:lang="css"-->
<!--添加“scoped”-作用域，属性将CSS仅限于此组件-->
<style scoped>
</style>

3.组件注册：

    一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册。

3.1全局注册

    使用 Vue 应用实例的 app.component() 方法，让组件在当前 Vue 应用中全局可用。

import { createApp } from 'vue'

const app = createApp({})

app.component(
  // 注册的名字
  'MyComponent',
  // 组件的实现
  {
    /* ... */
  }
)

如果使用单文件组件，可以注册被导入的 .vue 文件：

import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)

app.component() 方法可以被链式调用：

app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)

全局注册的组件可以在此应用的任意组件的模板中使用：

<!-- 这在当前应用的任意组件中都可用 -->
<ComponentA/>
<ComponentB/>
<ComponentC/>

所有的子组件也可以使用全局注册的组件，三个组件也都可以在彼此内部使用。

3.2 局部注册

    局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确

局部注册需要使用 components 选项：

<script>
import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  }
}
</script>

<template>
  <ComponentA />
</template>

对于每个 components 对象里的属性，它们的 key 名就是注册的组件名，而值就是相应组件的实现。上面的例子中使用的是 ES2015 的缩写语法，等价于：

export default {
  components: {
    ComponentA: ComponentA
  }
  // ...
}

注意：局部注册的组件在后代组件中并不可用。在这个例子中，ComponentA 注册后仅在当前组件可用，而在任何的子组件或更深层的子组件中都不可用。