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

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
    }
});

最后,看完本篇博客后,觉得挺有帮助的话,可以继续查看专栏其它内容嗷,一起来学习Vue吧~
在这里插入图片描述

点击进入Vue❤学习专栏~

学如逆水行舟,不进则退
发布了372 篇原创文章 · 获赞 561 · 访问量 8万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览