首页
关于
Search
1
前端跨域的解决方案
24 阅读
2
vue3封装el-button
21 阅读
3
nodejs实现mysql的增删改查
20 阅读
4
表格内容溢出显示省略号浮空提示内容
19 阅读
5
实现数组的push、filter、map方法
18 阅读
未分类
JavaScript
登录
Search
标签搜索
JavaScript
组件封装
vue
nodejs
笔记
谷歌插件
mysql
Nginx
数组
数组方法实现
原生js
promise
async、await
靓仔
累计撰写
12
篇文章
累计收到
0
条评论
首页
栏目
未分类
JavaScript
页面
关于
搜索到
12
篇与
的结果
2023-06-04
vue2中.sync操作符的使用方法
.sync操作符简化了父子组件传参后更新值的操作,减少了一半的开发量通过.sync代替实现。原来的实现逻辑(父组件v-bind传参给子组件,子组件props接收传过来的值,子组件中button上定义点击事件,事件中通过this.$emit(“事件名”,”修改的值”)来传给父组件,最后父组件在子组件上用子组件定义的事件名来获取子组件修改的内容。)过程相对繁琐故基本使用.sync来代替。例如:<!-- 父组件 --> <template> <div> <h1>{{ message }}</h1> <child-component :message.sync="message"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { name: 'ParentComponent', data() { return { message: '父组件' }; }, components: { ChildComponent } } </script> <!-- 子组件 --> <template> <div> <input type="text" v-model="Message"> <button @click="updateMsg">Update Message</button> </div> </template> <script> export default { name: 'ChildComponent', props: { message: { type: String, default:"" } }, data() { return { Message: this.message }; }, methods: { updateMsg() { this.$emit('update:message', this.Message); } } } </script>父组件中通过v-bind传值给子组件并在绑定的属性后添加.sync,子组件通过props接受到对应的message值,在子组件中定义对应的Message在页面展示,给对应的按钮添加点击事件,通过this.$emit来更新组件的值(特别注意:第一个参数的值一定要写成“update:props对应的值”),第二个参数是要修改的值,这样就能实现组件的实时更新了。
2023年06月04日
9 阅读
0 评论
0 点赞
2023-06-04
访客们,您好!
这是我博客开通的第一天,期待你们的访问和指导。
2023年06月04日
9 阅读
0 评论
0 点赞
1
2
3