vue中的组件化
组件化
1、定义全局组件
1、要在父实例中使用某个组件，组件必须在实例值之前定义
2、组件其实也是一个Vue实例，因此它在定义时也会接收：data、methond、生命周期函数等
3、不同的组件不会与页面的元素绑定，否则就无法复用了因此也没有el属性
4、组件渲染需要html模板，所以增加了template属性，值就是HTML模板，模板的内容必须由html双标记包裹
5、全局组件定义完毕，任何vue实例都可以直接在html中通过组件名称来使用组件了
6、data定义方式比较特殊，必须是一个函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局组件</title>
</head>
<body>
<div id="app">
<!--使用定义好的全局组件-->
<counter></counter>
<counter></counter>
</div>
</body> <script src="./node_modules/vue/dist/vue.js"></script>
<script>
// 定义全局组件，两个参数：1、组件名词 2、组件参数
Vue.component("counter",{
template:`<button v-on:click="count++">你点了我{{count}}下</button>`,
data(){
return{
count:0
}
}
});
var app = new Vue({
el:"#app"
});
</script>
</html>
2、组件的复用
定义好的组件可以任意复用多次
<div id="app">
<!--使用定义好的全局组件-->
<counter></counter>
<counter></counter>
<counter></counter>
</div>
3.局部注册
一旦全局注册，就意味着即便你以后不再使用这个组件，它依然会随着Vue的加载而加载，因此，对于
一些并不频繁使用的的组件，我们采用局部注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>局部组件</title>
</head>
<body>
<div id="app"> <increase></increase>
<br>
<increase></increase>
</div> <script src="./node_modules/vue/dist/vue.js"></script>
<script>
const increase = {
template:`<button v-on:click="count++">点我加{{count}}</button>`,
data(){
return{
count:0
}
}
};
var app = new Vue({
el:"#app",
components:{
increase: increase //将定义的对象注册为组件
/*
* components就是当前vue对象子组件集合
其中key就是子组件名称
其值就是组件对象的属性
* */
}
}); </script>
</body>
</html>
4、组件的通信
4.1 父向子简单通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父向子通信</title>
</head>
<body>
<div id="app">
<h1>大家好，给大家介绍一下</h1>
<!--使用子组件，同时传递title属性-->
<sun title="我来自火星"></sun>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
Vue.component("sun",{
//直接使用props接收到的属性来渲染页面
template:`<h1>{{title}}</h1>`,
props:['title'] //通过props来接收一个父组件传递的属性
}); var app = new Vue({
el:"#app"
});
</script>
</body>
</html>
4.2 父向子复杂通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父向子复杂的通信</title>
</head>
<body>
<div id="app">
<h2>我喜欢这些语言：</h2>
<!--使用子组件的同时，传递属性，这里使用了v-bind，指向了父组件自己的属性，language-->
<my-list :items="language"/>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
//定义一个子组件
let myList = {
template:`<ul>
<li v-for="item in items" :key="item.id">{{item.id}}:{{item.name}}</li>
</ul>`,
props:{
items:{
type:Array, //限定父组件传递来的必须是数组，否则报错
default:[] //默认值
}
}
};
var app = new Vue({
el:"#app",
components:{
myList //当key和value一样时，可以只写一个
},
data:{
language:[
{id:1,name:'Java'},
{id:2,name:'JavaScript'},
{id:3,name:'C语言'},
{id:4,name:"Python"}
]
}
});
</script>
</body>
</html>
4.3 子向父通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子向父通信</title>
</head>
<body>
<div id="app">
<h2>num: {{num}}</h2>
<!--使用子组件的时候，传递num到子组件中-->
<!--通过v-on指令将父组件的函数绑定到子组件上-->
<counter :num="num" @inc="increase" @dec="decrease"></counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
Vue.component("counter",{
//定义组件，定义两个按钮，点击数字num或加或减
template:`<div>
<button @click="plus">+</button>
<button @click="reduce">-</button>
</div>`,
//当子组件中的按钮被点击时，调用绑定的函数
methods:{
plus(){
this.$emit("inc"); //vue提供的内置的this.$emit函数，用来调用父组件绑定的函数
},
reduce(){
this.$emit("dec");
}
}
});
var app = new Vue({
el:"#app",
data:{
num:0
},
methods:{//父组件定义操作num的方法
increase(){
this.num ++;
},
decrease(){
this.num --;
}
}
});
</script>
</body>
</html>
vue中的组件化的更多相关文章
- Vue 入门之组件化开发
Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...
- vue中自定义组件（插件）
vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...
- Vue中父子组件执行的先后顺序
Vera Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...
- Vue中父子组件执行的先后顺序探讨
前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...
- Vue中父组件向子组件传值
Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue 中的组件
VUE中的组件 一个自定义的标签,vue就会把他看成一个组件,vue可以给这些标签赋予一定意义:一个页面就是一个组件 好处: 1.提高开发效率 2.方便重复使用 3.便于协同开发 4.更容易被管理和维 ...
- Vue 中数据流组件
好久不见呀,这两年写了很多很多东西,也学到很多很多东西,没有时常分享是因为大多都是我独自思考.明年我想出去与更多的大神交流,再修筑自己构建的内容. 有时候我会想:我们遇到的问题,碰到的界限,是别人给的 ...
- 简述vue中父子组件是怎样相互传递值的（基础向）
前言 首先,你需要知道vue中父组件和子组件分别指的是什么? 父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...
- 解决vue中element组件样式修改无效
vue中element组件样式修改无效 <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写st ...
随机推荐
- LINUX 学习笔记 账号与群组的管理
LINUX 账号与群组的管理 UID:UserID 保存文件:/etc/passwd GID:GroupID 保存文件:/etc/group /etc/passwd 文件结构 一行代表一个账号,里面还 ...
- ACE如何生成VS工程之mwc.pl用法
1.先写个mwc文件,文件名为hello.mwc workspace { hello.mpc} 2.写mpc文件,文件名为hello.mpc project(hello):aceexe, acexml ...
- 利用隐藏 iframe 下载文件
在开发项目中遇到问题:下载文件后台报错,下载文件的页面会出现空白或异常信息,需要解决. 解决方法:利用隐藏iframe下载文件 3:对于a标签,采用target属性方法 <a target=&q ...
- ATL与COM之间的关系、ATL的特点与基本使用方法
http://blog.csdn.net/titilima/archive/2004/07/18/44273.aspx ATL,Active Template Library活动模板库 是一种微软程序 ...
- java 中根据类的属性排序
package edu.del; import java.util.ArrayList; import java.util.Collections; import java.util.List; im ...
- kettle 在javascrip代码组件中使用fireToDB()函数实现自定义数据库查询
kettele里面的demo如下; var strConn = "MY Connection";var strSQL = "SELECT COUNT(*) FROM .. ...
- Applets的分析
一.有关Java Applet的基础 1.JavaApplet就是用Java语言编写的小应用程序,可以直接嵌入到网页中,并能够产生特殊的效果.包含Applet的网页被称为Java-powered页,可 ...
- 【oacle入门】表空间类型
系统表空间 系统表空间包括SYSTEM和SYSAUX表空间,系统表空间是所有数据库必须且自动创建的,一般存放在Oracle的数据字典表及相应数据. 永久表空间 永久表空间用户保存永久性数据,如系统数据 ...
- 微软连续12年成为Gartner分析和BI平台魔力象限的领导者
小悦还沉浸在新春开工大吉的工作中,微软Power BI就又迎来了一个好消息!据Gartner刚新鲜出炉的< 2019年Gartner的分析和商业智能平台魔力象限报告>,微软迄今已连续12 ...
- Servlet抽取的问题-method传递问题+表单提交的问题
隐藏域解决该问题: 其中,hidden就是隐形域. 表单提交的问题: 1.通过按钮实现: 2.通过function中,获取页面元素.submit方法