Vue 根组件,局部,全局组件 | 组件间通信,案例组件化
一 组件
<div id="app">
<h1>{{ msg }}</h1>
</div>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
// 通过new Vue创建的实例就是根组件(实例与组件一一对应,一个实例就是一个组件)
// 每个组件组件均拥有模板,template
var app = new Vue({
// 根组件的模板就是挂载点
el: "#app",
data : {
msg: "根组件"
},
// 根组件可以显式书写模板吗? 可以
// 模板: 由""包裹的html代码块,出现在组件的内部,赋值给组件的$template变量
// 根组件如果不书写自身模板,那么模板就采用挂载点,如果显式书写模块,就会替换挂载点,但根组件必须拥有挂载点
template: "<div>显式模板</div>"
})
// app.$template
</script>
根组件
<script type="text/javascript">
// 一个满足vue语法规则的对象就是一个组件
// 直接来定义这样的组件,用一个变量名来接收,就是创建了一个局部组件,
// 变量名就是局部组件的组件名
// 通过组件名就可以使用该组件 // 局部组件要在父组件中使用,一定要提前在父组件中进行注册 // 语法规则
// 有自身模板template,有data/methods/computed/watch...
var localTag = {
template: "<div class='sup'><div class='sub'></div></div>"
} var btnTag = {
// template: "<div><button>按钮1</button><button>按钮2</button></div>"
template: "<button @click='btnAction'>点击了{{ num }}下</button>",
// data需要绑定方法,数据通过方法返回值进行处理,达到组件复用时,数据的私有化
data: function() {
return {
num: 0
}
},
methods: {
btnAction: function () {
this.num++
}
}
} // 根组件
new Vue({
el: "#app",
// 注册子组件
components: {
// 1
// "localtag": localTag
// 2
// "localTag": localTag
// 3
// "local-tag": localTag
// 4
// localTag: localTag
// 5 ES6对象语法,key value写法相同,可以省略value
localTag,
btnTag, }
})
</script>
局部组件 (达到html+css+js代码块的复用) data要return,要注册
<body>
<div id="app">
<global-tag v-for="(o, i) in ls" :key="i"></global-tag>
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
// 全局组件
// 用Vue.component("组件名", {})来创建全局组件
// 全局组件附属于Vue实例,可以不需要注册就可以使用
Vue.component("global-tag", {
template: "<button @click='btnClick'>{{ n }}</button>",
data () {
return {
n: 0
}
},
methods: {
btnClick () {
this.n++
}
}
}) new Vue({
el: "#app",
data: {
ls: [0, 0, 0]
}
})
</script>
全局组件
二 组件间通信
<body>
<div id="app">
<local-tag :num="num" :sup_data="sup_data"></local-tag>
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
// 父组件与子组件建立联系的关键点
// 同绑定属性的方式进行数据传输
// 1.给在父组件中出现的子组件名定义标签的全局属性
// 2.全局属性的值赋值为父组件的数据变量
// 3.在子组件内部,通过props拿到标签中的全局属性名 var localTag = {
props: ['num', 'sup_data'],
template: "<div @click='divActive'>{{ num }}</div>",
methods: {
divActive () {
console.log(this.num);
console.log(this.sup_data);
}
}
} // 数据属于父组件,子组件来接收使用数据
new Vue({
el: "#app",
components: {
localTag
},
data: {
num: 10,
sup_data: [1, 2, 3, 4, 5]
}
})
</script>
父传子
<div id="app">
<global-tag @send_data="receive_data"></global-tag>
{{ n }}
</div>
<script type="text/javascript">
// 1.数据由子级提供
// 2.在子级中通过某个事件对外(this.$emit("事件名", ...args))发送一个事件
// 3.在父级的模板中,子组件名上,为发送的事件绑定一个回调方法,该回调方法由父级来完成实现体
// 4.在实现体中就可以拿到回调参数
Vue.component("global-tag", {
#子绑定事件
template: "<div @click='divAction'>我是div</div>",
data () {
return {
num: 10,
arrList: [1, 2, 3, 4, 5]
}
},
methods: {
divAction () {
this.$emit("send_data", this.num, this.arrList)
}
}
}); new Vue({
el: "#app",
data: {
n: 0
},
methods: {
receive_data (num, arrList) {
console.log("接收到的数据:", num, arrList);
this.n = num;
}
}
})
</script>
子传父
<body>
<div id="app">
<div>
<input type="text" v-model="val">
<button type="button" @click="submitMsg">提交</button>
</div>
<ul>
<!-- <li v-for="(v, i) in list" :key="i" @click="removeMsg(i)">{{ v }}</li> -->
<todo-list v-for="(v, i) in list" :key="i" :v="v" :i="i" @delect_action="delect_action"></todo-list>
</ul>
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
Vue.component("todo-list", {
template: "<li @click='delect_action'><span>第{{ i + 1 }}条: </span><span>{{ v }}</span></li>",
props: ['v', 'i'],
methods: {
delect_action () {
this.$emit("delect_action", this.i)
}
}
}) new Vue({
el: "#app",
data: {
val: "",
list: []
},
methods: {
submitMsg () {
// 往list中添加input框中的value
if (this.val) {
this.list.push(this.val);
this.val = ""
}
},
delect_action(index) {
this.list.splice(index, 1)
}
}
})
</script>
案例组件化
Vue 根组件,局部,全局组件 | 组件间通信,案例组件化的更多相关文章
- vue项目中设置全局引入scss，使每个组件都可以使用变量
在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...
- 聊聊Vue.js组件间通信的几种姿势
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...
- 【Vue】利用父子组件间通信实现一个场景
组件间通信是组件开发的,我们既希望组件的独立性,数据能互不干扰,又不可避免组件间会有联系和交互. 在vue中,父子组件的关系可以总结为props down,events up: 在vue2.0中废弃了 ...
- Vue的父子组件间通信及借助$emit和$on解除父子级通信的耦合度高的问题
1.父子级间通信,父类找子类非常容易,直接在子组件上加一个ref,父组件直接通过this.$refs操作子组件的数据和方法 父 这边子组件中 就完成了父 => 子组件通信 2. 子 =&g ...
- Blazor入门笔记（6）-组件间通信
1.环境 VS2019 16.5.1.NET Core SDK 3.1.200Blazor WebAssembly Templates 3.2.0-preview2.20160.5 2.简介 在使用B ...
- Vue（2）- v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
- Vue 2 --v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
- Vue组件之全局组件与局部组件
1全局注册实例 <div id="app"> <com-btn></com-btn> <com-btn></com-btn&g ...
- 前端（二十二）—— vue组件：局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList
Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...
随机推荐
- photoshop 切图技巧
前端切图技巧 手动切图 参考线切图 精准切图 自动切图 原文地址 http://www.cnblogs.com/w-wanglei/p/5598336.html
- linux xargs【转】
-i -I 参数区别 http://man.linuxde.net/xargs 它们都是用来作参数扩展替换的,以下两句代码其实效果一样 cat arg.txt|xargs -i sh sk.sh -p ...
- OPCServer：使用KEPServer
实际OPCServer使用(450M,中文,破解时间限制):KEPServer V6,百度网盘 ,密码: ykj2 本文为Java实现OPC通信的一部分 KEPServer中文官网 KEPServer ...
- HDU - 1255 覆盖的面积 （线段树求面积交）
https://cn.vjudge.net/problem/HDU-1255 题意 给定平面上若干矩形,求出被这些矩形覆盖过至少两次的区域的面积. 分析 求面积并的题:https://www.cnbl ...
- 转载 --- SKLearn中预测准确率函数介绍
混淆矩阵 confusion_matrix 下面将一一给出'tp','fp','fn'的具体含义: 准确率: 所有识别为"1"的数据中,正确的比率是多少. 如识别出来100个结果是 ...
- 【移动端】300ms延迟以及点透事件原因以及解决方案
产生原因 移动端会有双击缩放的这个操作,因此浏览器在click之后要等待300ms,看用户有没有下一次点击,也就是这次操作是不是双击 说完移动端点击300ms延迟的问题,还不得不提一下移动端点击穿透的 ...
- java 用PDFBox 删除 PDF文件中的某一页
依赖: <dependency> <groupId>org.apache.pdfbox</groupId> <artifactId>pdfbox-app ...
- thc_业务积累
查询医生SQL: select aa.id staffid,bb.property_value staffname from thc_warehouse.staff_record aa inner j ...
- 完美解决idea继承maven后,构建项目慢的问题
1.修改远程仓库的位置(maven默认仓库是国外,所以我们下载jar包很慢) 找到我们安装的maven路径下的conf文件夹下的settings.xml文件 将文件复制到 C:\Users\Admin ...
- vim 配置一：
一.vim前期准备 安装vimsudo apt-get install vim 需要保证自己的 vim 配置在 7.4 以上,有些插件只支持 7.4 以上的 vim 在根目录下建立 .vimrc 文件 ...