vue组件的那些事($children,$refs，$parent)的使用
如果项目很大，组件很多，怎么样才能准确的、快速的寻找到我们想要的组件了？？
1）$refs
首先你的给子组件做标记。demo ：<firstchild ref="one"></firstchild>
然后在父组件中，通过this.$refs.one就可以访问了这个自组件了，包括访问自组件的data里面的数据，调用它的函数
2）$children
他返回的是一个组件集合，如果你能清楚的知道子组件的顺序，你也可以使用下标来操作；
for(let i=;i<this.$children.length;i++){
console.log(this.$children[i].msg);输出子组件的msg数据；
}
接下来就给一个长一点的deno
首先定义一个父组件：parentcomponent，
在父组件中我又是使用了两个自组件（假如有一百个自组件）[明确一点，组件只能有一个根节点]，根节点是啥，我不知道。。。。。。
<template id="parentcomponent">
<div >
<p>this is a parent-component</p>
<firstchild ref="f1"></firstchild>
<secondchild ref="f2"></secondchild>
<button @click='show_child_of_parents'>show child msg</button>
</div>
</template>
分别给出两个字组件的定义：（第2个使用的是template,第1个是script）
<script type="text/x-template" id="childOne">
<div>
<p>this is first child</p> //使用stop阻止默认事件（vue的事件处理机制）
<button @click.stop='getParent'>get parent msg</button>
</div>
</script> <template id="childSec">
<div>
<p>this is second child</p>
</div>
</template>
组件模板定义好了，就是用：
1）挂在元素：
<script>
new Vue({
el:"#app",
data:{},
components:{
"parent-component":{
template:'#parentcomponent',
data(){
return{msg:'这是父组件中的内容'}
},
methods:{
show_child_of_parents(){
//children方式访问自组件
for(let i=;i<this.$children.length;i++){
console.log(this.$children[i].msg);
}
//通过$ref打标记，访问子组件
console.log(this.$refs.f1.msg);
this.$refs.f1.getParent();
},
},
components:{
'firstchild':{
template:'#childOne',
data(){
return {msg:'这是第一个子组件'};
},
methods:{
getParent(){
let a=;
console.log(a);
alert(this.$parent.msg); }
},
}, 'secondchild':{
template:'#childSec',
data(){
return {msg:"这是第二个组件"};
}
} } }
} }); </script>
2)使用父组件了
<body>
<p><strong>可以通过$refs访问父组件的子组件</strong></p>
<div id="app">
<parent-component></parent-component>
</div>
</body>
值得注意的是vue2,相比vue1,丢弃了一些东西。。。。、
http://www.cnblogs.com/dupd/p/5904109.html
总结一下：
1）组件只能一个根节点
2）可以在自组件中使用this.$parent.属性值，或者函数
3）在父组件中可以使用this.$refs.组件的标记 访问子组件，或者this.$children[i].属性，，访问子组件的
4）你需要注意this的指向
有图为证
2017-07-30
vue组件的那些事($children,$refs，$parent)的使用的更多相关文章
- Vue组件实例间的直接访问
前面的话 有时候需要父组件访问子组件,子组件访问父组件,或者是子组件访问根组件. 在组件实例中,Vue提供了相应的属性,包括$parent.$children.$refs和$root,这些属性都挂载在 ...
- Vue组件之间通信的三种方式
最近在看梁颠编著的<Vue.js实战>一书,感觉颇有收获,特此记录一些比价实用的技巧. 组件是MVVM框架的核心设计思想,将各功能点组件化更利于我们在项目中复用,这类似于我们服务端面向对象 ...
- Vue组件模板形式实现对象数组数据循环为树形结构
数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...
- Vue组件选项props
前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...
- canvas实现倒计时效果示例（vue组件内编写）
前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...
- 写一个vue组件
写一个vue组件 我下面写的是以.vue结尾的单文件组件的写法,是基于webpack构建的项目.如果还不知道怎么用webpack构建一个vue的工程的,可以移步到vue-cli. 一个完整的vue组件 ...
- 【转】Vue组件一-父组件传值给子组件
Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...
- 13.vue组件
vue组件(一) 组件嵌套: 1.全局嵌套: <!doctype html> <html> <head> <meta charset="utf-8& ...
- vue基础篇---vue组件
vue模块第一篇,因为公司马上要用到这vue开发.早就想好好看看vue了.只有实际工作中用到才会进步最快.vue其他的简单指令就不多讲了,没啥意思,网上一大堆.看w3c就ok. 组件这个我个人感觉坑蛮 ...
- vue组件通信&&v兄弟组件通信eventbus遇到的问题（多次触发、第一次不触发）
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <templ ...
随机推荐
- Spring+SpringMVC+MyBatis深入学习及搭建(十二)——SpringMVC入门程序（一）
转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6999743.html 前面讲到:Spring+SpringMVC+MyBatis深入学习及搭建(十一)——S ...
- 关于数据库优化1——关于count(1)，count(*),和count(列名)的区别，和关于表中字段顺序的问题
1.关于count(1),count(*),和count(列名)的区别 相信大家总是在工作中,或者是学习中对于count()的到底怎么用更快.一直有很大的疑问,有的人说count(*)更快,也有的人说 ...
- FutureTask分析(1.8）
FutureTask简介 FutureTask用于异步计算,也就是支持异步执行并返回结果.FutureTask本身是一个Runable,所以可以交给Thread来运行,在提交给Thread运行后,可以 ...
- mybatis介绍与环境搭建
一.不用纯jdbc的原因,即缺点. 1.数据库理解,使用时创建,不用时释放,会对数据库进行频繁的链接开启和关闭,造成数据库的资源浪费,影响数据库的性能.设想:使用数据库的连接池.2.将sql语句硬编码 ...
- DH 密钥交换算法
1.引言 CSDN搞什么短信验证,7年的账号居然登陆不了,真心抓狂,WTF!!!! DH,全称为"Diffie-Hellman",这是一种确保共享KEY安全穿越不安全网络的方法,换 ...
- BeanUtils.copyProperties VS PropertyUtils.copyProperties
作为两个bean属性copy的工具类,他们被广泛使用,同时也很容易误用,给人造成困然:比如:昨天发现同事在使用BeanUtils.copyProperties copy有integer类型属性的bea ...
- [leetcode-508-Most Frequent Subtree Sum]
Given the root of a tree, you are asked to find the most frequent subtree sum. The subtree sum of a ...
- 【Android Developers Training】 32. 向其它应用发送简单数据
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- mac下git配置和jenkins打包
今天自己配置了下jenkins,还算是比较顺利,把整个过程和大家分享下. 1. 查看秘钥是否存在 打开终端查看是否已经存在SSH密钥:cd ~/.ssh 如果没有密钥则不会有此文件夹,有则备份删除, ...
- Spring源码：IOC原理解析（二）
版权声明:本文为博主原创文章,转载请注明出处,欢迎交流学习! 接着上一章节的内容,我们来分析当new一个FileSystemXmlApplicationContext对象的时候,spring到底做了那 ...