vue的v-model指令总结之通信方式总结

一、v-model指令总结

javascript 复制代码
1、用在表单元素或组件中
2、用在表单元素上
 文本框或密码框相当于:value="数据"+@input="数据=$event. target. value'"
 复选框:checked="数据" +@change="数据=$event. target. checked"
 下拉列表:selected="数据" +@change="数据= $event. target. selected"
3、用在组件实现父子数据双向绑定
 :value="数据" + @input=" 数据=$event"

二、通信方式总结

1、父传子

复制代码
•   父组件内:在自组件标签上, 写属性
复制代码
•   子组件内:通过props属性接收

2、子传父

复制代码
• 子组件内: 通过: $emit(“自定义事件”,参数,参数2)
复制代码
• 父组件内:子组件标签上, : @自定义事件名="函数式"

3、祖孙

爷爷:provide () {}爷爷传送

孙子:inject: [''] 孙子接受

4、兄弟

通过evenbus事件总线

methods: {

handleClick () {

// 使用数据方 通过$on订阅

vm.$on('useMsg', (data) => {

console.log(data)

})

}

methods: {

handleClick () {

vm.$emit('useMsg', this.msg)

}

},

5、ref(ref属性值:ref属性所在的dom或组件 )

javascript 复制代码
   ①ref加在普通的元素上,用this.ref.name获取到的是dom元素;

   ②ref加在子组件上,用this.ref.name获取到的是组件实例,可以使用组件的所有方法;

   ③如何利用v-for和ref获取一组数据或者dom节点。

   当v-for用于元素或者组件的时候,引用信息将是包含dom节点或组件实例的数组;

   关于ref注册时间的重要说明:因为ref本身是作为渲染结果被创建的,在初始渲染的时候,你不能访问它们--它们还不存在!$refs也不是响应式的,因此你不应该试图用它在模板中做数据绑定。

6、vuex--->后期发

相关推荐
蔗理苦6 分钟前
2025-09-05 CSS3——盒子模型
前端·css·css3
mqiqe11 分钟前
架构-亿级流量性能调优实践
java·架构
二川bro1 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
野犬寒鸦1 小时前
力扣hot100:旋转图像(48)(详细图解以及核心思路剖析)
java·数据结构·后端·算法·leetcode
上单带刀不带妹1 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
七夜zippoe1 小时前
AI+Java 守护你的钱袋子!金融领域的智能风控与极速交易
java·人工智能·金融
缘如风1 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱1 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript
光影少年1 小时前
前端上传切片优化以及实现
前端·javascript·掘金·金石计划
岁忧1 小时前
(LeetCode 面试经典 150 题) 200. 岛屿数量(深度优先搜索dfs || 广度优先搜索bfs)
java·c++·leetcode·面试·go·深度优先