其他分享
首页 > 其他分享> > vue组件

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>

标签：vue,const,cpnc,app,Vue,template,组件
来源： https://blog.csdn.net/weixin_45736311/article/details/117425962