vue学习之四组件系统
vue.js既然是框架，那就不能只是简单的完成数据模板引擎的任务，它还提供了页面布局的功能。本文详细介绍使用vue.js进行页面布局的强大工具，vue.js组件系统。
一、Vue.js组件系统
每一个新技术的诞生，都是为了解决特定的问题。
组件的出现就是为了解决页面布局等等一些列的问题。
vue中的组件分为两种，全局组件和局部组件。
二、全局组件与局部组件
2.1全局组件
通过Vue.component()创建一个全局组件之后，我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。
方式一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body> <div id="app" >
<!--使用方式一-->
<global-component></global-component>
</div> <script>
// vue当中的组件分为全局组件和局部组件
// vue也是一个vue实例，创建时接收的参数与通过new创建的根实例类似，除了el这个属性名外
// 第一步注册一个组件
Vue.component("global-component", {
template: `<h1>Hello Vue</h1>`
}); new Vue({
el: "#app",
data: {
greeting: "Hello Vue",
},
})
</script>
</body>
</html>
方式二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body> <div id="app" > </div> <script>
// vue当中的组件分为全局组件和局部组件
// vue也是一个vue实例，创建时接收的参数与通过new创建的根实例类似，除了el这个属性名外
// 第一步注册一个组件
Vue.component("global-component", {
template: `<h1>Hello Vue</h1>`
}); new Vue({
el: "#app",
// 第二种使用方式
template: `<global-component></global-component>`,
data: {
greeting: "Hello Vue",
},
})
</script>
</body>
</html>
2.2局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body> <div id="app" >
<my-header></my-header>
</div> <script>
// 第一步，声明一个JavaScript对象，属性名和vue实例一样，除el
let Header = {
template: `<h1>{{ greeting }}</h1>`,
data(){
return {
greeting: "Hello Vue",
}
},
methods: {},
computed: {}
}; new Vue({
el: "#app",
// 第二种使用方式
data: { },
// 第二步，注册
components: {
'my-header': Header
}
})
</script>
</body>
</html>
三、组件的参数
因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el这样根实例特有的选项。
3.1data
data必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝, 也可以写成如下形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body> <div id="app" >
<global-component></global-component>
<global-component></global-component>
<global-component></global-component>
<global-component></global-component>
</div> <script>
// vue当中的组件分为全局组件和局部组件
// vue也是一个vue实例，创建时接收的参数与通过new创建的根实例类似，除了el这个属性名外
// 第一步注册一个组件
// data必须是一个函数
Vue.component("global-component", {
template: `<h1>{{ greeting }}</h1>`,
data () {
return {
greeting: "Hello Vue"
}
}
}); new Vue({
el: "#app",
// 第二种使用方式
data: { },
})
</script>
</body>
</html>
3.2在局部组件中使用自组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<style>
body {
margin: 0;
}
.box {
width: 100%;
height: 50px;
background-color: #2aabd2;
} </style>
</head>
<body>
<div id="component-demo">
</div>
<script>
// 定义一个局部组件，其实就是一个变量，它是一个object类型
// 属性与全局组件是一样的 let Fcontent = {
template: `
<div>
<span>这是头条</span> </div>
`
}; let Header = {
template: `
<div v-bind:class='{box: isBox}'>
<button @click="count++">{{ count }}</button>
<first-content></first-content>
</div>
`,
data() {
return {
count: 0,
isBox: true
}
},
components: {
'first-content': Fcontent
}
}; new Vue({
el: "#component-demo",
// 第二种使用方式，不会将div渲染进DOM，以template为根元素
template: `<my-header></my-header>`,
// 第二步，需要在根实例当中使用它
components: {
'my-header': Header
}
});
</script>
</body>
</html>
3.3父子组件的通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<style>
body {
margin: 0;
}
.header {
width: 100%;
height: 50px;
background-color: aquamarine;
}
</style>
</head>
<body> <div id="app"> </div> <script>
let Header = {
template: `
<div class="header">
这是子组件
<h1>{{ fatherdata }}</h1>
</div>
`,
props: ['fatherdata']
}; let App = {
template: `
<div id="app">
<my-header :fatherdata="role"></my-header>
</div>
`,
components: {
// 第二步，注册到父组件中
'my-header': Header
},
data() {
return {
role: '我是你爸爸'
}
}
}; new Vue({
el: "#app",
data: {
count: 0,
},
components: {
App
},
template: `<app></app>`
})
</script>
</body>
</html>
3.4子父组件的通信
父组件在mounted的时候，监听一个自定义事件。
给子组件绑定一个click事件之后，通过内建的方法$emit在父组件上触发一个事件，这个时间就是父组件监听的自定义事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<style>
body {
margin: 0;
}
.header {
width: 100%;
height: 50px;
background-color: aquamarine;
}
</style>
</head>
<body> <div id="app"> </div> <script>
let Header = {
template: `
<div class="header">
这是子组件
<button @click="sonClick">点击改变字体</button>
</div>
`,
methods: {
sonClick: function () {
this.$emit('change-size', 0.1);
}
}
}; let App = {
template: `
<div id="app">
<span :style="{ fontSize: articleFontSize + 'em' }">Hello Vue</span>
<my-header @change-size="fatherClick"></my-header>
</div>
`,
components: {
// 第二步，注册到父组件中
'my-header': Header
},
data(){
return {
articleFontSize: 1
}
},
methods: {
fatherClick: function (value) {
console.log(value);
this.articleFontSize += value;
}
}
}; new Vue({
el: "#app",
data: {
count: 0,
},
components: {
App
},
template: `<app></app>`
})
</script>
</body>
</html>
3.5混入
混入可以提高代码的重用性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<style>
body {
margin: 0;
}
.header {
width: 100%;
height: 50px;
background-color: aquamarine;
}
</style>
</head>
<body> <div id="app"> </div> <script> let mixs = {
methods: {
show: function (name) {
console.log(name);
},
hide: function (name) {
console.log(name);
}
},
}; let doAlex = {
template: `
<div>
<button v-on:click="show(name)">点击显示{{ name }}</button>
<button v-on:click="hide(name)">点击隐藏{{ name }}</button>
</div>
`,
data() {
return {
name: "alex",
}
},
mixins: [mixs],
}; let doPeiqi = {
template: `
<div>
<button v-on:click="show(name)">点击显示{{ name }}</button>
<button v-on:click="hide(name)">点击隐藏{{ name }}</button>
</div>
`,
data() {
return {
name: "peiqi",
}
},
mixins: [mixs],
}; let App = {
template: `
<div>
<my-alex></my-alex>
<my-peiqi></my-peiqi>
</div>
`,
components: {
'my-alex': doAlex,
'my-peiqi': doPeiqi
}
}; new Vue({
el: "#app",
data: {
count: 0,
},
components: {
App
},
template: `<App>`
})
</script>
</body>
</html>
3.6插槽
有时候我们需要向组件传递一些数据，这时候可以使用插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<style>
body {
margin: 0;
}
.header {
float: left;
height: 50px;
margin-left: 5px;
background-color: aquamarine;
}
</style>
</head>
<body> <div id="app">
<com-content>登录</com-content>
<com-content>注册</com-content>
<com-content>最热</com-content>
<com-content>段子</com-content>
<com-content>42区</com-content>
<com-content>图片</com-content>
</div> <script>
Vue.component('com-content', {
template: `
<div class="header">
<slot></slot>
</div>
`
}); new Vue({
el: "#app",
data: { },
})
</script>
</body>
</html>
3.7具名插槽
操作使用了组件的复用，如果我们在同一个组件内写入不同的页面呢？此时，我们需要多个插槽，并且给不同的内容命名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.nav-link {
width: 100px;
height: 100px;
background-color: #2aabd2;
float: left;
margin-left: 5px;
text-align: center;
line-height: 100px;
}
</style>
<script src="../statics/vue.js"></script>
</head>
<body>
<div id="app01">
<base-layout>
<template slot="header">
<h1>这是标题栏</h1>
</template>
<template>
<h2>这是内容</h2>
</template>
<template slot="footer">
<h3>这是页脚</h3>
</template>
</base-layout>
</div> <script>
let baseLayout = {
template: `
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main><slot></slot></main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
`
}; new Vue({
el: "#app01",
components: {
"base-layout": baseLayout
} })
</script> </body>
</html>
我们还是可以保留一个未命名插槽，这个插槽是默认插槽，也就是说它会作为所有未匹配到插槽的内容的统一出口。
3.8非关系组件之间的通信
非父子组件之间可以通过一个中间Vue实例来进行通信。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app">
<com-main></com-main>
</div> <script> let pizza = new Vue(); let Alex = {
template: `
<div>
<button @click="alexClick">点击向沛齐道歉</button>
</div>
`,
methods: {
alexClick: function () { pizza.$emit("alex_apo", "原谅我吧，请你大保健~~~");
}
},
}; let peiQi = {
template: `
<div v-show="isShow">原谅你了~~~</div>
`,
mounted () {
pizza.$on("alex_apo", function (alexsay) {
if ( alexsay ) {
console.log("原谅你了~~~");
}
});
},
data () {
return {
isShow: false
};
}
}; let App = {
template: `
<div id="app">
<alex></alex>
<peiqi></peiqi>
</div>
`,
components: {
'alex': Alex,
'peiqi': peiQi
}
}; new Vue({
el: "#app",
template: '<app></app>',
components: {
'app': App,
},
}) </script> </body>
</html>
3.9在组件上使用v-model
自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住：
<input v-model="searchText">
等价于：
<input
v-bind:value="searchText"
v-on:input="searchText = $event.target.value"
>
当用在组件上时，v-model 则会这样：
<custom-input
v-bind:value="searchText"
v-on:input="searchText = $event"
></custom-input>
为了让它正常工作，这个组件内的 <input> 必须：
将其 value 特性绑定到一个名叫 value 的 prop 上
在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出
写成代码之后是这样的：
Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
})
现在 v-model 就应该可以在这个组件上完美地工作起来了：
<custom-input v-model="searchText"></custom-input>
如下是在组件中使用v-model示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app">
</div> <script>
let Model = {
template: `
<div>
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
/>
<h1>{{ value }}</h1>
`,
props: ['value']
}; let App = {
template: `
<div>
<custom-input v-model="searchText"></custom-input>
`,
components: {
'custom-input': Model,
},
data(){
return {
searchText: "",
}
}
}; new Vue({
el: "#app",
template: `<App></App>`,
components: {
App,
}
})
</script>
</body>
</html>
3.10使用组件的注意事项
注意事项一：单个根元素
当构建一个内容页面的组件时，我们的组件可能包含多个HTML标签。
<h1>Hello World</h1>
<h2>Hello Vue</h2>
然而如果你在模板中尝试这样写，Vue 会显示一个错误，并解释道 every component must have a single root element (每个组件必须只有一个根元素)。你可以将模板的内容包裹在一个父元素内，来修复这个问题，例如：
<div>
<h1>Hello World</h1>
<h2>Hello Vue</h2>
</div>
注意事项二：解析特殊HTML元素
有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。
这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：
<table>
<blog-post-row></blog-post-row>
</table>
这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：
<table>
<tr is="blog-post-row"></tr>
</table>
需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：
字符串 (例如：template: '...')
单文件组件 (.vue)
<script type="text/x-template">
vue学习之四组件系统的更多相关文章
- Vue.js之组件系统
vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. Vue.js组件系统 每一个新技 ...
- Vue框架之组件系统
1,Vue组件系统之全局组件 1.1Vue全局组件的在实例化调用Vue的模板中导入组件的名称 <!DOCTYPE html> <html lang="zh-cn" ...
- vue学习之组件
组件从注册方式分为全局组件和局部组件. 从功能类型又可以分为偏视图表现的(presentational)和偏逻辑的(动态生成dom),推荐在前者中使用模板,在后者中使用 JSX 或渲染函数动态生成组件 ...
- Vue学习之--------组件的基本使用（非单文件组件）（代码实现）（2022/7/22）
文章目录 1.为啥要使用组件 2.基本使用 3.代码实例 4.测试效果 5.注意点 1.为啥要使用组件 好用啊.像堆积木一样 2.基本使用 Vue中使用组件的三大步骤: 一.定义组件(创建组件) 二. ...
- vue学习之六路由系统
一.vueRouter实现原理 VueRouter的实现原理是根据监控锚点值的改变,从而不断修改组件内容来实现的,我们来试试不使用VueRouter,自己实现路由控制,如下代码: <!DOCTY ...
- Vue学习之组件切换及父子组件小结（八）
一.组件切换: 1.v-if与v-else方式: <!DOCTYPE html> <html lang="en"> <head> <met ...
- Vue学习笔记-组件通信-子传父（自定义事件）
props用于父组件向子组件传递数据,还有一种比较常见的是子组件传递数据或事件到父组件中.我们应该如何处理呢?这个时候,我们需要使用自定义事件来完成.什么时候需要自定义事件呢?当子组件需要向父组件传递 ...
- Vue学习之--------组件嵌套以及VueComponent的讲解（代码实现）（2022/7/23）
欢迎加入刚建立的社区:http://t.csdn.cn/Q52km 加入社区的好处: 1.专栏更加明确.便于学习 2.覆盖的知识点更多.便于发散学习 3.大家共同学习进步 3.不定时的发现金红包(不多 ...
- Vue 学习笔记 — 组件初始化
简书 在vue中有3个概念很容易搞混,data,computed,props,特别是我们这些原后端开发人员. new Vue({ el: "#x", data: { id: 1 } ...
随机推荐
- RabbitMQ备份交换器
备份交换器,AlternateExchange(AE): 备份交换器是为了实现没有路由到队列的消息,与上篇介绍到的mandatory都是为了处理没有路由到的消息. AE相对于mandatory逻辑更简 ...
- Unicode编码转换汉字
Uri.UnescapeDataString(string) #region Unicode转换汉字 Console.WriteLine(Uri.UnescapeDataString("\u ...
- No.1 PyQt学习
由于项目的原因,要学PyQt了.以下是第一天的学习成果 # -*- coding: utf-8 -*- import sys from PyQt4 import QtGui, QtCore class ...
- SQL Server 索引结构及其使用（一）[转]
SQL Server 索引结构及其使用(一) 作者:freedk 一.深入浅出理解索引结构 实际上,您可以把索引理解为一种特殊的目录.微软的SQL SERVER提供了两种索引:聚集索引(cluster ...
- WP8.1学习系列(第十九章)——事件和路由事件概述
我们将介绍在使用 C#.Visual Basic 或 Visual C++ 组件扩展 (C++/CX) 作为编程语言并使用 XAML 进行 UI 定义时,针对 Windows 运行时应用的事件的编程概 ...
- 【SPMF开源数据挖掘平台入门】MaxSP算法使用说明
前段时间,由于项目中用到了序列挖掘的算法,师兄推荐我用用SPMF.在此做个记录. 首先简单介绍一下SPMF: SPMF是一个采用Java开发的开源数据挖掘平台. 它提供了51种数据挖掘算法实现,用于: ...
- sqlite的一个Unable to Open database file的坑爹错误
今天,被sqlite的一个机制给坑了.本人用C语言写的cgi程序去访问sqlite数据库,读取没有问题,但是插入新纪录和更新数据就不行,在服务器上直接对数据库进行增删查改则没有任何问题.但浏览器上访问 ...
- StarUML2 建模工具全平台破解及license验证简要分析
破解方法:找到安装目录下的文件:LicenseManagerDomain.js阅读得知,改软件用rsa加密用户信息,换行为用户信息的分隔符修改以下代码,然后打开软件点击菜单栏中的帮助->输入li ...
- SQL Server 优化总结
1.作为过滤条件字段的数据表,在拼接语句尽量优先拼接,以提升查询效率
- std::u32string conversion to/from std::string and std::u16string
I need to convert between UTF-8, UTF-16 and UTF-32 for different API's/modules and since I know have ...