vue组件

  • 时间:
  • 浏览:
  • 来源:互联网
组件(Component)是 Vue.js 最强大的功能之一。
组件可以扩展HTML元素,封装可重用的HTML代码, 
组建的使用分为三步:
创建组件构造器(通过Vue.extend()方法创建)
注册组件(调用Vue.component()方法注册)
使用组件(在vue组件范围内使用)
注册一个全局组件语法格式如下:
Vue.component(tagName, options)
tagName 为组件名,options 为配置选项。
组件化开发
开发效率高
可维护性好

组件化的基本使用

1.组件的复用(可任意次数,任意部位的复用)
<div ip="app">
<组件标签名><组件标签名>
<组件标签名><组件标签名>
<组件标签名><组件标签名>
</div>

在这里插入图片描述

<body>

<div id="app"> 
  //在此处添加几个标签,下方<div>部分的内容就会显示多少次、
  //该组件标签名在哪儿被引用 就会在哪儿显示,方便快捷
  <bc></bc> //组件的复用
  <bc></bc>
</div>

<script src="../js/vue.js"></script>
<script>
  //ES6
  //1.创建组件构造器对象 (cpnc)
  const cpnc = Vue.extend({
	template:  //template的作用只是起包装元素,他不会被渲染到页面上去
	  <div>
		<h2>A</h2>
		<p>B</p>
		<p>C</p>
      </div>
  })
 //2.注册组件,定义一个名为bc的组件
  Vue.component('bc',cpnc)//cpnc 将组件构造器传输进来

  const app = new Vue({
    el:'#app',
    data:{
      message:'你好'
	}
</script>
</body>																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																										

1.全局组件

注册一个简单的全局组件 runoob,并使用它:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="app"> 
    {{message}}
    </div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    //ES6
    //1.创建组件构造器对象 (cpnc)
    const cpnc = Vue.extend({
	template:
	  <div>
		<h2>A</h2>
		<p>B</p>
		<p>C</p>
      </div>
  })
 //2.注册组件(全局组件)
  Vue.component('qq',cpnC)//cpnc 将组件构造器传输进来
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好'
	},
	components:{
       qq:cpnC  //qq  使用组件时的标签名; cpnC  组件构造器
    }
</script>
</body>		
</html>

2.局部组件

注册一个简单的局部组件 runoob,并使用它
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
	<runoob></runoob>
</div>

<script>
var Child = {
  template: '<h1>自定义组件!</h1>'
}

// 创建根实例
new Vue({
  el: '#app',
  components: {
    // <runoob> 将只在父模板可用
    'runoob': Child
  }
})
</script>
</body>
</html>

3.父组件和子组件

父组件:当你创建一个vue实例时,el需要绑定div,那么这个div就是父组件
子组件:当创建一个组件时,那个组件名就是子组件

在这里插入图片描述

<body>

<div id="app"> 
  <cpn2><cpn2>
</div>

<script src="../js/vue.js"></script>
<script>
  //创建第一个组件
  const cpnc1 = Vue.extend({
	template:  //template的作用只是起包装元素,不会被渲染到页面上去
	  <div>
		<h2>猪八戒</h2>
		<p>孙悟空</p>
		<p>沙和尚</p>
      </div>
  })
  
 //创建第二个组件
  const cpnc2 = Vue.extend({
	template:  //template的作用只是起包装元素,不会被渲染到页面上去
	  <div>
		<h2>猪八戒2</h2>
		<p>孙悟空2</p>
		<p>沙和尚2</p>
		<cpn1><cpn1>  
		//当要显示cpn2的时候,cpn2就会一层一层的显示,直到此行 会先解析cpn1,然后显示cpn1的内容
     	//这样写的话,我们就可以看作  cpn2是父组件、cpn1是子组件
     	//最终的显示结果就是cpn2所包含的内容:猪八戒2,孙悟空2,沙和尚2,猪八戒,孙悟空,沙和尚
     </div>
      ,   
      components:{
	    cpn1:cpnc1 
	  }
  })
  
   //root组件
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好'
	}
	components:{
	  cpn2:cpnc2
  }
</script>
</body>																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																										

本文链接http://metronic.net.cn/metronic/show-16449.html