Vue组件基础

Vue组件基础

Vue的组件化思想

组件化是Vue中很重要的思想:

  • 它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用
  • 任何的应用都会被抽象成一颗组件树

Vue组件基础_第1张图片

组件化思想的应用:

  • 有了组件化的思想,我们在之后的开发中就要充分的利用它。
  • 尽可能的将页面拆分成一个个小的、可复用的组件。
  • 这样让我们的代码更加方便组织和管理,并且扩展性也更强。

注册组件

全局注册

  • Vue.component(‘组件名称’, { }) 第1个参数是标签名称,第2个参数是一个选项对象
  • 全局组件注册后,任何vue实例都可以用
<div id="example">
    
  <my-component>my-component>
div>
<script>
    //   注册组件 
    // 1、 my-component 就是组件中自定义的标签名
	Vue.component('my-component', {
      template: '
A custom component!
'
}) // 创建根实例 new Vue({ el: '#example' })
script>

局部注册

<div id="app">
      <my-component>my-component>
  div>


<script>
    // 定义组件的模板
    var Child = {
      template: '
A custom component!
'
} new Vue({ //局部注册组件 components: { // 将只在父模板可用 一定要在实例上注册了才能在html文件中使用 'my-component': Child } })
script>

局部注册的组件只能在注册它的Vue实例中使用

组件注意事项

  • 组件参数data必须是一个函数,同时要求改函数返回一个对象
  • 组件模板必须是单个根元素,当需要写多个HTML标签时,需在最外层套一个div
  • 组件模板的内容可以是模板字符串
  • 组件可以使用多次

<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<div id="app">
			<cpn>cpn>
			<cpn>cpn>
			<cpn>cpn>
		div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		<script>
			Vue.component('cpn', {
				template: '',
				data() {
					return {
						counter: 0
					}
				},
				methods:{
					handle() {
						this.counter++;
					}
				}
			})
		  const app = new Vue({
		  el: "#app",
		    data: {
		
		    }
		  });
		script>
	body>
html>

如上的代码中,名为cpn的组件被使用了三次,从运行效果可以看出,每个组件的counter变量是独立的

Vue组件基础_第2张图片

模板的分离写法

上述注册组件的方法,我们将template模板放在了注册组件的内部,这样做会带来两个坏处

  1. 没有代码补全,撰写模板的过程更麻烦
  2. 代码看起来更加凌乱

因此一般我们会采用模板的分离写法,nVue提供了两种方案来定义HTML模块内容:

  • 使用

你可能感兴趣的:(Vue,vue,js,html,javascript)