2020 零基础 Vue快速入门内置组件 component 的用法

文章目录

1、引言
2、常见模板组件
3、(共有模板/全局模板)，全局模板顾名思义肯定是放在哪里都能用
4、其他方法
5、(模板的继承)，全局模板顾名思义肯定是放在哪里都能用

1、引言

学习Vue是今年的一项安排，今天看官方文档时遇到了component这个内置组件，想着还是写一篇博客记载一下吧。

2、常见模板组件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	<button-counter></button-counter>
	<test></test>
</div>
<script type="text/javascript">
Vue.component('button-counter', {
	props: ['title'],
	data: function () {
		return {}
	},
	template: '<div><h1>你给我里giaogiao</h1></div>',
	methods:{
		
	}
})
var vm = new Vue({
	el : "#app",
	data : {
		
	},
	components:{
		test : {
			template:"<h2>你居然给我里giaogiao?</h2>"
		}
	}
});
</script>
<style type="text/css">

</style>
</body>
</html>

在这里插入图片描述

3、(共有模板/全局模板)，全局模板顾名思义肯定是放在哪里都能用

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


//这里使用Vue.component原型方法来创造
  Vue.component(
  "hehe",template:"<div>呵呵呵<div>"
);

let vm = new Vue({
    el:"#app",
    data:{
  },
    components:{
   //这里则不需要添加,因为 互不影响
  }
});

4、其他方法

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

let xixi={
  template:"<div>嘻嘻嘻<div>"
}

let vm = new Vue({
  el : "#app",
  data{
  },
  components:{
    xixi
  }

});

5、(模板的继承)，全局模板顾名思义肯定是放在哪里都能用

/*
  我们来讲个最简单的 父亲，儿子 ，孙子的 例子
  要注意以下几点：
        1.先实例化对象vm
        2.造出parent模板,并挂载在 vm的 conponents 下
        3.造出 son 模板 并 挂载 在 父级 parent 的conponents下，并在 父级template属性中 包裹住自己的 模板名标签 ；同理 造出孙子标签
        4.在HTML节点中添加 目标 根节点
              （节点的顺序一定要书写正确）
*/
<div id="app">
  <parent></parent>
</div>

//创建 孙子 模板
  let grendson = { 
    template:"<div>孙子</div>"
 }

//创建 儿子 模板
  let son= { 
    template:"<son>儿子<grendson >孙子</grendson ></son>"
    components:{
     grendson 
    }
 }

//创建 父亲 模板
  let parent = { 
    template:"<div>父亲<son></son></div>"
    components:{
     son
    }
 }
//实例化vm对象
  let vm = new Vue({
    el:"#app",
    data:{
    },
    components:{
      parent
    }
});