vue父子组件通信
vue父子组件通信
Vue如何实现父子组件之间的通信功能 在vue组件通信中其中最常见通信方式就是父子组件之中的通信,而父子组件的设定方式在不同情况下又各有不同。最常见的就是父组件为控制组件子组件为视图组件。父组件传递数据给子组件使用,遇到业务逻辑操作时子组件触发父组件的自定义事件。无论哪种组织方式父子组件的通信方式都是大同小异。 父传子 在父组件中,用 v-bind 动态绑定一个自定义属性,用于给子组件传递数据 <template> <div> <child :users="user"></child> </div> </template> <script> import { child } from "./child"; export default { components: { child }, data() { return { user: '张三' }; } }; </script> 在子组件中,使用 props 接收父组件传过来的数据。 <template> <div>{{ users }}</div> </template> <script> export default { props: ["users"] }; </script> 子传父 子组件通过事件的方式,利用 $emit 给父组件传值。 注意:$emit 的第一个参数是父组件自定义事件的方法名,后边的 “value” 是子组件要给父组件传递的数据 <template> <div> <button @click="datas"></button> </div> </template> <script> export default { methods: { datas() { this.$emit("info", value); } } }; </script> 在父组件中,绑定一个自定义事件,用来接收子组件传来的值; <template> <div> <child @info="getInfo"></child> </div> </template> <script> import { child } from "./child"; export default { components: { child }, methods: { getInfo(value) { // value 就是子组件传递过来的数据 } } }; </script> 原文:https://blog.csdn.net/weixin_47013351/article/details/124335003
 2022-11-23
Vue中实现对齐方式选择组件
Vue中实现对齐方式选择组件
效果 主要使用点击给当前元素添加class 创建一个Float组件 <template> <div class="float"> <div class="title">{{ title }}</div> <div class="right-input-wrap"> <div class="alignMode" v-for="(item,index) in 3" :key="index"> <span @click="checkAtv(index)" :class="[cIndex === index?'active':'','align'+(index+1)]"><em></em><em></em><em></em><em></em></span> </div> </div> </div> </template> js部分 <script> export default { name: "float", components: {}, props: { title: { type: String, default: "标题", }, value: { type: [String, Number], default: "", }, prop: { type: String, default: "", }, }, data() { return { cIndex: 1 }; }, computed: { }, watch: {}, methods: { checkAtv(index){ this.cIndex = index; console.log(index) if(index == 0){ this.$emit("update", "left", this.prop); }else if(index == 1){ this.$emit("update", "none", this.prop); }else if(index == 2){ this.$emit("update", "right", this.prop); } } }, created() {}, mounted() {}, beforeMount() {}, }; </script> 样式部分 <style lang="less" scoped> .alignMode span.active { background: #daebff; } .alignMode em:first-child,.alignMode em:nth-child(3) { width: 8px; } .alignMode em:nth-child(2), .alignMode em:nth-child(4) { width: 100%; } .alignMode em:first-child, .alignMode em:nth-child(3) { width: 8px; } .alignMode em:nth-child(2), .alignMode em:nth-child(4) { width: 100%; } .alignMode .align1 { text-align: left; } .alignMode .align2 { text-align: center; } .alignMode .align3 { text-align: right; } .alignMode em { display: inline-block; vertical-align: top; border-top: 1px solid #333; margin: 1px 0; } .alignMode span { display: inline-block; width: 13px; height: 13px; padding: 5px; border-radius: 50%; line-height: 0; margin: 0 2px; cursor: pointer; } .float { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; .left-text { font-size: 12px; color: #888; } .right-input-wrap { display: flex; flex: 1; justify-content: end; // padding-right: 10px; .radio { margin-right: 10px; .text { font-size: 12px; } } } } </style> 使用组件 引入组件(路径自己找) import FloatVue from "../../input2/Float.vue"; export default { name: "home", components: { FloatVue }, 使用 <FloatVue title="对齐方式" @update="propsStyle.float = $event" :value="propsStyle.float" ></FloatVue>
 2022-11-23
在Vue中this.$refs使用方法
在Vue中this.$refs使用方法
this.$refs 在vue中ref可以以属性的形式添加给标签或者组件 ref 写在标签上时:this.$refs.ipt 获取的是添加了ref="ipt"标签对应的dom元素 ref 写在组件上时:this.$refs['component'] 获取到的是添加了ref="component"属性的这个组件 <template> //给标签使用 <input type="text" ref="ipt"/> //给组件使用 <comp-detail ref="component"></comp-detail> <button @click="confirm">确定</button> </template> methods:{ confirm(){ console.log(this.$refs.ipt.value) //打印出输入框中的value值 this.$refs['component'].init() //调用组件comp-detail中的init()方法 } } 原文链接:https://blog.csdn.net/weixin_52208079/article/details/117949166
 2022-11-23
     跳转到第 页,共 1 页

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录