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：Debian系统的安装
这期就安装与Ubantu.Linux Mint差不多的系统,但是这个Debian系统的话,它安装时却有些不一样,什么不一样,我们接下来看看吧! 安装Debian系统 系统下载 Debian 9.5下载 ...
- python基础15上_迭代器_生成器
# 迭代器和生成器 # 迭代器: # 双下方法 : 很少直接调用的方法.一般情况下,是通过其他语法触发的 # 可迭代的 —— 可迭代协议 含有__iter__的方法('__iter__' in dir ...
- Shell 使用 expr 进行数学运算
1.语法格式: 第一种:expr $num1 operator $num2 第二种:$(($num1 operator $num2)) 2.expr 操作符: 注意:这里比较为true,返回 1.只支 ...
- 东芝L10安装Centos5.5
为什么安装5.5:因为高版本的需要PAE设定但是老电脑不支持,偶又不想重新编译内核,so... 1. 安装之前需要把电脑格式化(我是整机安装Linux),否则会报not enough space l ...
- xargs处理来之STDIN的输入
xargs能够将标准输入进行处理,配合下一个命令进行批量处理 #example grep -f go.test ~/jqyou/genedhs_10D |sed '/-1$/d' |awk '{pri ...
- Java 实现ftp 文件上传、下载和删除
本文利用apache ftp工具实现文件的上传下载和删除.具体如下: 1.下载相应的jar包 commons-net-1.4.1.jar 2.实现代码如下: public class FtpUtils ...
- Your CPU supports instructions that this TensorFlow binary was not compiled to use: AVX2
pycharm运行TensorFlow警告:Your CPU supports instructions that this TensorFlow binary was not compiled to ...
- Knowledge From Practice（JavaScript）
1.HTML事件对象 onmouseover:鼠标移入事件 onmouseout:鼠标移出事件 onmousedown:鼠标落下事件 onmouseup:鼠标抬起事件 例子: onclick:鼠标点击 ...
- 微信小程序 image属性 mode
mode属性可以改变图片的填充容器方式
- python智能提示配置
Package Control 安装方法 1.通过快捷键 ctrl+` 或者 View > Show Console 打开控制台,然后粘贴相应的 Python 安装代码: 2.Sublime T ...