vue中的子传父和父传子

子传父(this.$emit)

1、子组件某一个元素绑定常规事件

2、子组件事件函数中写上this.$emit("自定义的事件名称"，传递的值)

3、父组件通过v-on指令绑定自定义事件

4、父组件的methods中声明自定义函数，通过参数e获取子组件传递的数值

父传子

方法一：利用ref传值

ref的作用：1、用在原生标签上，获取当前元素，进行DOM操作

ref在DOM元素上的作用相当于给DOM节点起了一个名字，此时利用this.$refs.xxx，就可以拿到该元素并进行相应的操作

2、用在组件上，获取当前组件,进行组件之间的传值

ref作用在组件上相当于给组件起了一个名字，通过this.$refs.xxxx可以拿到子组件的数据，或者调用子组件的方法。

1、在子组件中添加ref属性

2、子组件在methods中定义获取参数的方法

3、父组件调用子组件中的方法

方法二：利用props传值

利用props传值可以将动态（静态）的数据传递给子组件，传递是单向的。当父组件中的值发生改变时，子组件的值也会发生改变。

1、把需要传递的子组件的值当作子组件的属性

2、在child中设置props属性接收父组件传递的值（type是传递值的类型）

利用插值表达式可以直接调用传递的参数{{sendChild2}}

vue中的子传父和父传子相关推荐

vue中定时器一般用法，定时器函数传参以及清除定时器
一.vue中定时器一般用法(举个例子) 显示当前时间, setInterval()方法会每秒执行一次函数,类似手表功能: <template><div class="use ...
vue中父子组件先后渲染_VUE如何实现子父组件、父子组件、兄弟组件传值
父子组件传值: 父组件定义: 代码示例子父组件传值: 父组件方法定义: 子组件执行父组件方法定义: methods: { closeOrOpenLeftMenu() { if (this.isLef ...
Vue中使用vue-croper插件实现图片上传裁剪并传到SpringBoot后台接口
场景前后端分离的项目,前端修改头像时,需要对头像进行裁剪并且能实时预览,然后上传到SpringBoot后台. 实现效果如下注: 博客: https://blog.csdn.net/badao_li ...
Vue中使用微信JSDK实现图片上传
1.npm安装,不会的看这里 npm install weixin-js-sdk 2.main.js全局注册 import wx from 'weixin-js-sdk' Vue.prototype. ...
vue中 .sync 修饰符个人理解
vue中.sync修饰符有什么用 .sync 修饰符其实就是一个语法糖 vue中 :子组件不能修改props 外部数据 vue中: $emit 可以触发事件并传参 vue中: $event可以获取 ...
Vue中JSX的基本用法
基本用法首先需要约定一下,使用JSX组件命名采用首字母大写的驼峰命名方式,样式可以少的可以直接基于vue-styled-components写在同一个文件中,复杂的建议放在单独的_Styles.js ...
vue中如何优雅实现爷孙组件的数据通信($attrs/$listeners)
$attrs和 $listeners如何使用呢? $attrs是用来将数据从爷组件传递给孙组件的.(理解为之前的父传子) $listeners是用来从孙组件中触发爷组件中事件的.(理解为之前的子传父) ...
vue中父子组件先后渲染_vue父子组件钩子函数的执行顺序
加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount-& ...
vue中计算属性computed传递参数
vue中computed计算属性无法直接进行传参,如果有传参数的需求可以使用闭包函数(也叫匿名函数)实现.例如传过来不同的状态,我们设置成不同的颜色.(三目运算符可以实现但是只能设置两种,状态多了就不 ...
vue中父子组件先后渲染_vue父子组件传值（子传父，非父子组件传值）
1. 子组件向父组件传值子组件: <template><div>子组件:<span>{{childValue}}</span><!-- 定义一个 ...

vue中的子传父和父传子

vue中的子传父和父传子相关推荐

最新文章

热门文章