vue父子传值
来源:互联网 发布:淘宝店铺神笔在哪里 编辑:程序博客网 时间:2024/06/01 08:49
vue事件处理器
点击事件修饰符@click.stop 阻止冒泡@click.stop.prevent 阻止默认事件 (a标签点击功能失灵)@click.stop.self 给绑定对象绑定事件,对子元素没有效果@click.stop.once 只生效一次@keyup.enter/tab/delete(捕获“删除”和“退格”键)/space/down
父组件如何传值给子组件?
vue父组件通过v-bind:num来传值给子组件
<template> <div id="app"> <img src="./assets/logo.png"> <hello v-bind:num="num"></hello> <p >父组件:{{num}}</p> </div></template><script>import hello from "./components/hello";export default { data(){ return { num: 11 } }, components:{ hello }}</script>
子组件通过props: [‘num’],来接收值
<template> <div class="hello"> <button @click="jiajia">+</button> <button @click="jianjian">-</button> <div>{{num}}</div> </div></template><script>export default { props: ['num'], data () { return { num: 0; } }, methods:{ jiajia(){ this.num++; }, jianjian(){ this.num--; } }}</script>
子组件如何传值给父组件?
本不推荐子组件传值给父组件,因为提倡的是数据单向流通
想要实现可以使用 $emit。
先在父组件引入子组件的上面自定义一个事件
<template> <div id="app"> <img src="./assets/logo.png"> <hello v-bind:num="num" v-on:jia="injia" v-on:jian="dejian"></hello> <p >父组件:{{num}}</p> </div></template><script>import hello from "./components/hello";export default { data(){ return { num: 11 } }, components:{ hello }, methods:{ injia(){ this.num++; }, dejian(){ this.num--; } }}</script>
再在子组件里面调用父组件定义的事件名来触发父组件的方法来更改值(注意是事件名不是方法名)
<template> <div class="hello"> <button @click="jiajia">+</button> <button @click="jianjian">-</button> <div>{{num}}</div> </div></template><script>export default { props: ['num'], data () { return {// num: 0 } }, methods:{ jiajia(){ this.$emit('jia'); }, jianjian(){ this.$emit('jian'); } }}</script>
其实子组件传值给父组件的原理还是父组件在更改那个值的,只是方法交给了子组件来调用才产生效果
阅读全文
0 0
- vue父子传值
- Vue父子组件传值
- vue父子组件互相传值
- vue2.0 .vue文件非父子组件传值问题
- vue基础语法以及父子组件如何相互传值
- Vue.js父子组件和非父子组件间的传值通信
- Vue通过ref父子组件拿值
- vue-父子组件间的相互传值与传址
- vue.js单文件组件中非父子组件的传值
- vue 父子组件通信
- vue非父子通信
- vue父子组件通信
- Vue父子组件通信
- Vue父子组件通信
- vue实现父子双向通信
- Vue父子组件创建
- Vue父子通信 props
- vue父子组件中传值
- 软件工程(C编码实践篇)学习总结
- 计蒜客 noip 模拟#4Day1T1 小X的素数 【线性筛】
- Volley
- 类似大众点评_每3秒切换一条消息
- 用numpy把一个矩阵的一行或一列删除,再把剩下的拼在一起
- vue父子传值
- 计算机网络自顶向下方法第四章笔记
- RxJava
- 点击加载圆形进度条,进入扫描二维码界面,接口回调,自定义view/组合view
- 026day(全局,局部,静态变量和变量的作用域,生存期)
- 随机生成30个数,试比较直接插入排序、简单选择排序、冒泡排序、快速排序、堆排序和希尔排序的时空性能和稳定性。
- vmware 虚拟机三种网络模式 桥接 NAT 仅主机区别 是什么意思
- Spring学习笔记之泛型依赖注入
- Oracle 事物