vue2父子组件传值props（vue父子组件传值emit）



3.4.1.子组件 接收信息

父组件 显示子组件模板, 通过 props , $attrs 接值

3.4.1.1.子组件

通过 props 属性接到 父组件 传来值, 在子组件中可以通过 this 来使用这些信息

也可以 通过 $attrs 接收 没有被 props 声明的值

3.4.1.2.父组件

通过 msg 属性 向 子组件 传值

也可以通过 v-bind 一次性传递多组信息

3.4.2.子组件 watch 监听

父组件 传递 动态信息 , 子组件 watch 监听信息

3.4.2.1.子组件

通过 watch 监听 父组件传来 msg 信息, 在回调函数中 修改 子组件中的信息

3.4.2.2.父组件

向 子组件 传 msg 信息, 通过 按钮 修改msg, 被子组件watch监听

3.4.3.通过 props 传函数

父组件 传递 函数 , 子组件 调用函数回传值

3.4.3.1.子组件

接收 父组件传来 getData() 函数, 调用此函数 回传信息

3.4.3.2.父组件

向 子组件 传getData , 类型为函数, 子组件调用时 触发 监听函数 reData() 接收到值

3.4.4.v-model绑定信息

子组件在 props 中使用value 接收信息 v-model的值, 通过 input 接收返回信息

页面 UI 组件最长用的方式

3.4.4.0.v-model的本质

v-model 实现双向绑定的原理 , 是 value 属性 及 input 事件

3.4.4.1.子组件

通过 value 接收到 父组件 v-model 传来的信息

通过 v-model 双向绑定 childMsg, 当在子组件修改这个值时, 会被 watch 监听到

再 通过 this.$emit(‘input’, nv + “返回信息”); 通过 input 返回数据

3.4.4.2.父组件

在 父 组件通过 v-model 双向绑定 msg , 子组件 通过 input 事件返回 子组件返回的信息

3.4.5.textarea

3.4.5.1.子组件

将 input 换成 textarea 效果是一样

3.4.5.2.父组件

3.4.6.select

3.4.6.1.子组件

接收到 value , options

下拉框 也可以 通过 input 事件, 返回信息

3.4.6.2.父组件

3.4.7.radio

3.4.7.1.子组件

单选框 也是通过 input 事件返回信息

3.4.7.2.父组件

3.4.8.checkbox

3.4.9.1.子组件

用 value 接收到数组

3.4.8.2.父组件

通过 数组类型 selVals: [0,1], 向子组件 传值

3.4.9.model 自定义

通过 model 在子组件中 自定义 接收值 ,及返回事件

3.4.9.1.子组件

通过 model 来 自定义 属性

3.4.9.2.父组件

父组件 使用 v-model:xxx 来指定 向 子组件 传递值

3.4.10. 父子同步

3.4.10.1.子组件

使用 向 父组件 同步数据

3.4.10.2.父组件

不再使用 v-model 来 监听子组件 回传数据, 而是 通过 来同步子组件返回的数据

3.4.11.Click事件回传数据

3.4.11.1.子组件

使用 按钮 的 click事件 来 返回数据

3.4.11.2.父组件

3.4.12.computed监听数据

3.4.12.1.子组件

使用 computed 来 返回数据

3.4.12.2.父组件

3.4.13.数据转汉字

3.4.13.1.子组件

3.4.13.2.父组件

3.4.14.数值范围

3.4.14.1.子组件

3.4.14.2.父组件

3.4.15.$refs 找子组件

通过 $refs 找到子组件 调用 子组件函数

3.4.15.1.子组件

子组件 中定义 函数 接收val 参数

3.4.15.2.父组件

在 父组件中 通过 $refs 找到指定的组件

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/75874.html