【vue】中 $parent 和 $children 的使用方法
<div id="app">
A{{msg}}
<my-button :msg="msg"></my-button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.7/vue.common.dev.js"></script> <script>
let vm = new Vue({
el: '#app',
data: {
msg: '100'
},
mounted () {
console.log(this.$parent, '父') // 没有父组件
console.log(this.$children, '子') // 99组件
},
components: {
'MyButton': {
template: `<div>B<my-radio></my-radio></div>`,
data () {
return {
msg: '99'
}
},
mounted () {
console.log(this.$parent, '父') // 100组件
console.log(this.$children, '子') // 88组件
},
components: {
'MyRadio': {
template: `<div>C</div>`,
data () {
return {
msg: '88'
}
},
},
},
},
}
})
</script>
$children 官方介绍:
当前实例的直接子组件。需要注意 $children
并不保证顺序,也不是响应式的。如果你发现自己正在尝试使用 $children
来进行数据绑定,考虑使用一个数组配合 v-for
来生成子组件,并且使用 Array 作为真正的来源。
$parent 官方介绍:
当前组件树的根 Vue 实例。如果当前实例没有父实例,此实例将会是其自己。
既然可以获取到组件的实例,那么就可以调用组件的属性或是方法进行操作
<div id="app">
A{{msg}}
<my-button :msg="msg"></my-button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.7/vue.common.dev.js"></script> <script>
let vm = new Vue({
el: '#app',
data: {
msg: '100'
},
methods: {
handleClick () {
console.log('点击事件')
this.$children.forEach(child => {
child.todo()
})
}
},
components: {
'MyButton': {
template: `<div @click="$parent.handleClick">B</div>`,
data () {
return {
msg: '99'
}
},
methods: {
todo () {
console.log('todo事件')
}
},
},
}
})
</script>
$children 是一个数组,是直接儿子的集合,关于具体是第几个儿子,那么儿子里面有个 _uid 属性,可以知道他是第几个元素,是元素的唯一标识符,根据这个属性,我们可以进行其他的操作
关于父子通讯的方式有很多种,那么其中就包含了$parent 和 $children
【vue】中 $parent 和 $children 的使用方法的更多相关文章
- js模仿jquery里的几个方法parent, parentUntil, children
有时工作需要, 也是接着上一章的方法, 用js模仿jquery里的几个方法parent, parentUntil, children. function parent(node){ return no ...
- 详解vue全局组件与局部组件使用方法
这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...
- vue七种实现组建通信的方法
目录 组件通信 1.props 父组件--->子组件通信 2.$emit 子组件--->父组件传递 $emit与props结合 兄弟组件传值 3.bus(事件总线) 兄弟组件通信 4.$p ...
- Vue中组件通信的几种方法(Vue3的7种和Vue2的12种组件通信)
Vue3组件通信方式: props $emit expose / ref $attrs v-model provide / inject Vuex 使用方法: props 用 props 传数据给子组 ...
- Vue子组件调用父组件的方法
Vue子组件调用父组件的方法 Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...
- Vue学习一:{{}}html模板使用方法
本文为博主原创,未经允许不得转载: 之前自学了vue,在项目中应用了vue,由于是第一次使用,感觉非常强大,使用也非常方便,趁有时间,总结一下vue学习过程中 各个指令的使用方法,只要掌握了vue的指 ...
- Vue中子组件调用父组件的方法
Vue中子组件调用父组件的方法 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- vue+element ui项目总结点(四)零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等
vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...
- Vue的 $parent,并不能准确找到上一层的控件,所以如果需要,需要填坑这个 bug,递归寻找下上级
Vue的 $parent,并不能准确找到上一层的控件,所以如果需要,需要填坑这个 bug,递归寻找下上级 // Find components upward function findComponen ...
随机推荐
- Vue+Django2.0 restframework打造前后端分离的生鲜电商项目(2)
1.restful api介绍 1.前后端分离的优缺点 1.为什么要用前后端分离 1.pc.app.pad多端适应 2.SPA(单页面应用)开发模式开始流行 3.前后端分离职责不清 4.开发效率问题, ...
- Day5--Python--字典
字典1.什么是字典 dict. 以{}表示,每一项用逗号隔开,内部元素用key:value的形式来保存数据 {'jj':'林俊杰','jay':'周杰伦'} 查询效率非常高,通过key来查找元素 内部 ...
- tomcat发布项目,运行不了
工作中经常出现项目本来运行得好好的,从SVN上面更新代码后就不行了 这个问题有时候是因为编译不成功,处理步骤如下: 1.clean整个项目,重新编译 2.如果还是不行,则把编译中认为是error的设置 ...
- mongodb安装和运行
转载来源:https://blog.csdn.net/IT_wanghe/article/details/53884229 参考教程:http://www.runoob.com/mongodb/mon ...
- 高级组件——工具栏JToolBar
import javax.swing.*; import java.awt.*; public class Demo extends JFrame { public Demo() { setTitle ...
- HTTP之Content-Type
前言:HTTP/1.1 HTTP/1.1 协议规定的 HTTP 请求方法有OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种. 其中 POST 一般用 ...
- angular中因异步问题产生的错误解决方法
方法一 private userTaskList(){ let auth = this.make_basic_auth("kermit","kermit"); ...
- python3.x 和pip3的安装
python3.x 和pip3的安装 本人在学习python3的时候,视频中使用的是python3,在讲解到有些第三方库的时候,无法使用到pip3 install来安装所需的库.由于系统是centos ...
- CodeForces121E 线段树上线段果
http://codeforces.com/problemset/problem/121/E 题意: Petya 喜欢幸运数,幸运数只包含 4 和 7 这两个数字.例如 47,744,4 都是幸运数字 ...
- 2017-12-15python全栈9期第二天第四节之格式化输出%s和用户交互个人简历模板
#!/user/bin/python# -*- coding:utf-8 -*-name = input('姓名:')age = input('年龄:')job = input('工作:')hobbi ...