vue组件化思想

组件化是vue的一个重要思想

它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构建我们的应用。

任何的应用都会被抽象成一颗组件树。

注册组件

组件的使用分成三个步骤:创建组件构造器、注册组件、使用组件。

注意:不论使用哪一种注册方式,template属性只能有一个,并且有且仅有一个根节点。

<body>
<div id="app">
<my-component></my-component>
<my-component2></my-component2>
<my-component3></my-component3>
<my-component4></my-component4>
</div>
</body> <template id="temp">
<div>
<p>我是p标签</p>
<h1>我是h1标签</h1>
<div style="color: red;">哈哈哈</div>
</div>
</template>
<script>
var num = 10
/**
* 1 使用Vue.extend来注册 组件
* 按照了Java的开发思想,变量名往往是驼峰规则。
* 但是使用组件的时候一般不使用驼峰规则
* 而是将驼峰规则全部改成小写,然后中间用-连接
*/
Vue.component('myComponent', Vue.extend({
// template就是组件要展示的内容,可以是html标签
template: '<h3>这是用extend注册的组件</h3>'
}))
/**
* 2.不使用extend去注册组件
*/
Vue.component('myComponent2', {
// template就是组件要展示的内容,可以是html标签
template: '<div><h3>这是不用extend注册的组件</h3><h3>我是第二个h3</h3></div>'
})
// 不论使用哪一种注册方式,template属性只能有一个,并且有且仅有一个根节点。 Vue.component('myComponent3', {
// template就是组件要展示的内容,可以是html标签
template: `<div><h3>组件中使用外部变量num:${num}</h3></div>`
})
// 3.使用template
Vue.component('myComponent4', {
template: '#temp'
})
let app = new Vue({
el: '#app'
})
</script>

私有组件

我们上面使用Vue.component注册组件时,注册的是全局的组件。这意味着我们可以再任意的Vue实例中,使用该组件。

如果我们想要注册一个局部的私有组件,可以将组件挂载到某个实例上。

<body>
<div id="app">
<my-component></my-component>
<my-comp></my-comp>
</div>
<div id="app2">
<my-component></my-component>
</div>
</body> <script>
/**
* 注册的是全局组件
*/
Vue.component('myComponent', Vue.extend({
// template就是组件要展示的内容,可以是html标签
template: '<h3>这是用extend注册的组件</h3>'
}))
let myComp = Vue.extend({
// template就是组件要展示的内容,可以是html标签
template: '<h3>我是私有组件</h3>'
})
let app = new Vue({
el: '#app',
components: {
myComp
//'myComp':myComp 当名字和变量名相同的时候,名字可以省略
}
})
let app2 = new Vue({
el: '#app2'
})
</script>

父子组件

​ 前面我们看到了组件树,组件和组件之间存在层级关系。这就是父组件与子组件。组件中也有components关键字,同样是使用components将子组件注册到父组件。

<body>
<div id="app">
<parent-com></parent-com>
</div>
</body> <script>
// 1.创建一个子组件
let childCom = Vue.extend({
template: `
<div>我是子组件内容。</div>
})
// 2.创建一个父组件
let parentCom = Vue.extend({
template: `
<div>
<h1>我是父组件内容</h1>
<child-com></child-com>
</div>
`,
components: {
childCom
}
})
let app = new Vue({
el: '#app',
components: {
parentCom
}
})
</script>

组件的数据

组件是一个单独的功能模块的封装,这个模块有属于自己的HTML模板,也应该有属于自己的data。

我们先测试一下组件是否能使用Vue实例中的data。

<body>
<div id="app">
<my-com></my-com>
</div>
</body> <script>
let myCom = Vue.extend({
template: `<div>我是组件{{msg}}</div>`
})
let app = new Vue({
el: '#app',
data: {
msg: '哈哈哈'
},
components: {
myCom
}
})
</script>

经过测试,我们发现不能使用。即使可以使用,如果将所有的数据都放到vue实例中,vue实例是不是会变得非常臃肿。

那么 组件的数据存放到哪里?

组件也有个data属性、methods、filters等等等等,使用方式与vue一致(data不一样。)

Data必须是一个方法,返回一个对象。其他的与vue实例使用方式一样。

<script>
let myCom = Vue.extend({
template: `<div>我是组件{{msg}}</div>`,
data() {
return {
msg: '我是子组件的msg'
}
}
})
let app = new Vue({
el: '#app',
data: {
msg: '哈哈哈'
},
components: {
myCom
}
})
</script>

组件的通信

在开发中,往往会存在这个场景,让子组件使用父组件的数据。

比如我们从后台获取到一些数据后,这些数据需要传递到子组件去使用,或者我们获取到了很多的数据,这些数据分别需要分发到下面的各个子组件中使用。怎么操作?

父组件向子组件传值 props

组件中,可以使用props来声明需要从父级接受到的数据。

使用:

  1. 首先在父组件中使用v-bind将数据绑定给子组件
  2. 再在子组件中,使用props接收。

propsdatamethods平级,有两种使用方式。

  1. 字符串数组,数组中的字符串就是传递时的名称。
 props: [
// 第二步,使用props接收.
'msg'
]

具体例子

<body>
<div id="app">
<!-- 第一步,用绑定的方式,将父组件的数据绑定给子组件 -->
<my-com :msg="msg"></my-com>
</div>
</body>
<template id="myTemp">
<div>
<span>当前数量:{{count}}</span>
<div>{{msg}}</div>
</div>
</template>
<script>
let myCom = Vue.extend({
template: '#myTemp',
data() {
return {
count: 0
}
},
props: [
// 第二步,使用props接收.
'msg'
]
})
let app = new Vue({
el: '#app',
data: {
msg: '我是父组件的msg'
},
components: {
myCom
}
})
</script>
  1. 对象,对象可以设置传递时的类型和默认值。

Type支持的类型:String、Number、Boolean、Array、Object、Date、Function、Symbol

props: {
msg: {
type: String,
default: '我是默认值,父组件没有传给我msg'
}
}

具体例子

<body>
<div id="app">
<!-- 第一步,用绑定的方式,将父组件的数据绑定给子组件 -->
<my-com :msg="msg"></my-com>
</div>
</body>
<template id="myTemp">
<div>
<span>当前数量:{{count}}</span>
<div>{{msg}}</div>
</div>
</template>
<script>
let myCom = Vue.extend({
template: '#myTemp',
data() {
return {
count: 0
}
},
// 第二步,使用props接收.
props: {
msg: {
type: String,
default: '我是默认值,父组件没有传给我msg'//如果父组件没有绑定的时候显示
}
}
})
let app = new Vue({
el: '#app',
data: {
msg: '我是父组件的msg'
},
components: {
myCom
}
})
</script>

父组件向子组件传递方法 $emit

我们可以使用自定义事件来完成。父组件调用子组件的方法,使用$emit来实现。

<body>
<div id="app">
<!-- 第一步,在子组件上,使用@符号为该组件绑定一个事件 -->
<my-com @alert-msg="alertMsg"></my-com>
</div>
</body>
<template id="myTemp">
<div>
<button @click="handlerMethod">点我</button>
</div>
</template>
<script>
let myCom = Vue.extend({
template: '#myTemp',
methods: {
handlerMethod() {
// 第一个参数表示要调用的方法。用alert-msg,而不是alertMsg
// 第二个参数往后,就是我们需要传递的参数
this.$emit('alert-msg', '调用')
}
}
})
let app = new Vue({
el: '#app',
data: {
msg: '我是父组件的msg'
},
methods: {
alertMsg(msg) {
alert(msg)
}
},
components: {
myCom
}
})
</script>

父组件调用子组件方法 $refs

$refs是和ref一起使用的。通过ref给某个子组件绑定一个特定的ID,然后我们使用$refs.ID就可以访问到子组件了。

<body>
<div id="app">
<button @click="countAdd">点我</button>
<!-- 第一步,给子组件绑定一个ref -->
<my-com ref="myComp"></my-com>
</div>
</body>
<template id="myTemp">
<div>
{{count}}
</div>
</template>
<script>
let myCom = Vue.extend({
template: '#myTemp',
data() {
return {
count: 1
}
},
methods: {
addCount() {
this.count++
}
}
})
let app = new Vue({
el: '#app',
methods: {
countAdd() {
// 第二步,在父组件中使用this.$refs.id就行了
console.log(this.$refs.myComp.count)
this.$refs.myComp.addCount()
}
},
components: {
myCom
}
})
</script>

【vue-03】组件化开发 component的更多相关文章

  1. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  2. 【06】Vue 之 组件化开发

    组件其实就是一个拥有样式.动画.js逻辑.HTML结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue的组件和也做的非常彻底,而且有自己的特色.尤其是她 ...

  3. vue(9)—— 组件化开发 - webpack(3)

    前面两个终于把webpack相关配置解析完了.现在终于进入vue的开发了 vue组件化开发预热 前期准备 创建如下项目: app.js: footer.js: main.js: webpack.con ...

  4. 06Vue.js快速入门-Vue组件化开发

    组件其实就是一个拥有样式.动画.js逻辑.HTML结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue的组件和也做的非常彻底,而且有自己的特色.尤其是她 ...

  5. Vue 入门之组件化开发

    Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...

  6. vue组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...

  7. vue04 组件化开发 Vue自动化工具

    5. 组件化开发 5.1 组件[component] 组件(Component)是自定义封装的功能.在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的网站之间,也存在同样的功能. 而在网 ...

  8. vue.js原生组件化开发(一)——组件开发基础

    前言 vue作为一个轻量级前端框架,其核心就是组件化开发.我们一般常用的是用脚手架vue-cli来进行开发和管理,一个个组件即为一个个vue页面,这种叫单文件组件.我们在引用组件之时只需将组件页面引入 ...

  9. Vue的指令以及组件化开发

    一. 自定义指令 如何: 1. 创建指令 Vue.directive("指令名",{ inserted(elem){//指令所在的元素被加载到DOM树上后自动执行指令 //elem ...

随机推荐

  1. kubernetes生产实践之mysql

    简介 kubedb mysql 生命周期及特性 Supported MySQL Features Features Availability Clustering ✓ Persistent Volum ...

  2. C# 应用 - 多线程 7) 处理同步数据之 Synchronized code regions (同步代码区域): Monitor 和 lock

    目录: System.Threading.Monitor:提供同步访问对象的机制; lock 是语法糖,是对 Monitor Enter 和 Exit 方法的一个封装 lock 案例 1. Monit ...

  3. js 判断 是否在当前页面

    1.使用visibilitychange 浏览器标签页被隐藏或显示的时候会触发visibilitychange事件. document.addEventListener("visibilit ...

  4. 实验: survivor放不下的对象进入老年代

    实验一: 存活对象包含 小于survivor大小的对象 + 大于survivor的对象 private static final Integer _1MB = 1024 * 1024; /** * - ...

  5. 前后端(PHP)使用AES对称加密

    前端代码: // 这个是加密用的 function encrypt(text){ var key = CryptoJS.enc.Utf8.parse('1234567890654321'); //为了 ...

  6. python2文件开头两行

    #!/usr/bin/python  或者  #!/usr/bin/env python 告诉操作系统python位置 # -*- coding:utf-8 -*- 设置文件编码为utf-8  (默认 ...

  7. FutureTask核心源码分析

    本文主要介绍FutureTask中的核心方法,如果有错误,欢迎大家指出! 首先我们看一下在java中FutureTask的组织关系 我们看一下FutureTask中关键的成员变量以及其构造方法 //表 ...

  8. 自动QQ邮箱发送邮件

    语言:python 参考:https://www.runoob.com/python/python-email.html 前提: 1.QQ邮箱开启了SMTP服务 2.生成了授权码,这个授权码将作为自己 ...

  9. windows平台 cloin +rust 开发环境搭建

    rust 安装请看上一篇 clion 下载地址 破解 教程 1.先执行reset_jetbrains_eval_windows.vbs 2.打开软件选择免费使用 将ide-eval-resetter- ...

  10. 全网最值得推荐的ELKB日志学习博客-博客地址留存

    博客地址:https://elasticstack.blog.csdn.net/article/details/102728604 博客地址留存,后续解决疑难问题