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

文章目录

          • 1、引言
          • 2、常见模板组件
          • 3、(共有模板/全局模板),全局模板 顾名思义 肯定是 放在哪里都能用
          • 4、其他方法
          • 5、(模板的继承),全局模板 顾名思义 肯定是 放在哪里都能用
        • 点击进入Vue❤学习专栏~

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: '

你给我里giaogiao

'
, methods:{ } }) var vm = new Vue({ el : "#app", data : { }, components:{ test : { template:"

你居然给我里giaogiao?

"
} } }); </script> <style type="text/css"> </style> </body> </html>

2020 零基础 Vue快速入门 内置组件 component 的用法_第1张图片

3、(共有模板/全局模板),全局模板 顾名思义 肯定是 放在哪里都能用
<div id="app">
  <hehe></hehe>
</div>


//这里使用Vue.component原型方法来创造
  Vue.component(
  "hehe",template:"
呵呵呵
" ); let vm = new Vue({ el:"#app", data:{ }, components:{ //这里则不需要添加,因为 互不影响 } });
4、其他方法
<div id="app">
  <xixi></xixi>
</div>

let xixi={
  template:"
嘻嘻嘻
" } 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:"
孙子
"
} //创建 儿子 模板 let son= { template:"儿子孙子" components:{ grendson } } //创建 父亲 模板 let parent = { template:"
父亲
"
components:{ son } } //实例化vm对象 let vm = new Vue({ el:"#app", data:{ }, components:{ parent } });

最后,看完本篇博客后,觉得挺有帮助的话,可以继续查看专栏其它内容嗷,一起来学习Vue吧~
2020 零基础 Vue快速入门 内置组件 component 的用法_第2张图片

点击进入Vue❤学习专栏~

学如逆水行舟,不进则退

你可能感兴趣的:(Vue全家桶系列)