vue---父调子 $refs (把父组件的数据传给子组件)子调父 $emit (把子组件的数据传给父组件)
2023-09-27 14:28:58 时间
ps:App.vue 父组件
Hello.vue 子组件
App.vue :
<template>
<div id="app">
<input type="button" name="" id="" @click="parentCall" value="父调子" />
<hello ref="chil" />
</div>
</template>
<script>
import hello from './components/Hello'
export default {
name: 'app',
'components': {
hello
},
methods: {
parentCall () {
this.$refs.chil.chilFn('我是父元素传过来的')
}
}
}
</script>
Hello.vue :
<template>
<div class="hello">
</div>
</div>
</template>
<script>
export default {
name: 'hello',
'methods': {
chilFn (msg) {
alert(msg)
}
}
}
</script>
ps:App.vue 父组件
Hello.vue 子组件
App.vue :
<template>
<div id="app">
<hello @newNodeEvent="parentLisen" />
</div>
</template>
<script>
import hello from './components/Hello'
export default {
name: 'app',
'components': {
hello
},
methods: {
parentLisen (evtValue) {
//evtValue 是子组件传过来的值
alert(evtValue)
}
}
}
</script>
Hello.vue :
<template>
<div class="hello">
<input type="button" name="" id="" @click="chilCall()" value="子调父" />
</div>
</template>
<script>
export default {
name: 'hello',
'methods': {
chilCall (pars) {
this.$emit('newNodeEvent', '我是子元素传过来的')
}
}
}
</script>
相关文章
- Vue 非父子组件之间的通信
- vue - 详细路由配置
- vue - 前置工作 - 目录功能介绍
- 【Vue】通过keep-alive实现路由组件的数据缓存
- 【Vue】通过插槽slot实现【父组件·数据】操作【子组件】(图文+代码示例)
- vue+iview 通过a标签实现文件下载
- vue 自定义报警组件
- 【vue系列-04】vue的表单数据收集,基本指令和自定义指令
- 【前端】vue组件之间数据传递/父子组件/父传子/子传父/兄弟组件
- Vue组件的操作-自定义组件,动态组件,递归组件
- 来吧!一文彻底搞定Vue组件!
- 如何创建并发布一个 vue 组件
- vue数据更新,但是页面组件没有更新,甚至获取的this中的数据都不一样,使用$set也不行
- vue的keep-alive,后台播放音乐?
- 【Vue】Vue2组件传参总结来了(建议收藏)
- vue实战入门基础篇五:从零开始仿门户网站实例-关于我们实现
- 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件
- VUE @hook浅析(监听子组件的生命周期钩子)
- vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题
- Vue表单和组件
- Vue子组件向父组件传值(this.$emit()方法)
- Django+Vue项目学习第六篇:vue+django发送post请求,设置不同content-type,前后端如何处理参数
- Vue开发实例(02)之将Vue项目代码导入到IDEA并运行
- vue-创建组件
- VUE 在组件中 获取 路由信息
- Vue父子组件互传数据详细流程
- 造个自己的Vue的UI组件库类似Element