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 找到指定的组件
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/bian-cheng-ri-ji/68085.html