vue3(自定义组件) prop 和 Attrs的使用方式(父子组件双向绑定)

已于 2023-07-05 18:14:59 修改
阅读量1.4k 收藏
点赞数
分类专栏： vue3 elementpuls 文章标签： javascript 前端 vue.js
于 2023-07-05 11:03:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30620793/article/details/131550390
版权

效果：

        1.单后缀

        2.多后缀

版本：

        "vue": "^3.2.47",

        "element-plus": "^2.3.6",

需求:

        样式中类似 height: 100px;有很多这种带单位样式，那么需要做一个填值，然后选择后缀的element 组件。
        实际就是一个原生字段，对应多个修改字段。

问题说明：

        使用props，子组件使用v-model绑定后，可以传值给子组件，但是子组件不能修改。
        使用attrs，可以传值给子组件，可以修改但是父组件的源数据不会一起变化且源数据变化，它也不会变化。

        如果子组件需要影响源数据，需要使用emits。

解决方式：

        1.父子组件都绑定同一个源数据，比如pinia。(这种不能叫组件且耦合)

        2.prop接收源数据，attrs接收其他信息，然后使用emits来更改源数据。

例如：element 后缀组件

        API:

                

属性名称作用例子

data

源数据v-model:data="inputS"

suffix

后缀。string | Array

例如:"suffix",["suffix1","suffix2"],[["suffixLabel","suffix"],["suffixLabel","suffix2"]]

inputClick

输入时就同步数据给源数据,否则就是输入框change同步数据

:valueAttrs="valueAttrs"

 

const valueAttrs = {
dataXXX: '500px',
style: {
backgroundColor: 'red'
}
}

valueAttrs

值输入框的属性

suffixAttrs

后缀的属性同valueAttrs

       使用:

<template>
    <div>
        <InputSuffix2 v-model:data="inputS" :suffix="['px', '%']"/>
    </div>

</template>

<script setup>
import InputSuffix2 from "@component/element/input_suffix2.vue";
</script>

组件代码：

<template>
    <div class="custom-com-input-suffix" v-bind="attrs.divAttrs">
        <template v-if="attrs.inputClick !== undefined">
            <el-input @input="valueChange" v-model="input" style="width: 65%;" v-bind="attrs.valueAttrs"/>
            <template v-if="typeof attrs.suffix === 'string'">
                <el-input @input="suffixChange" v-model="suffix" type="text" style="width: 35%;"
                          v-bind="attrs.suffixAttrs"/>
            </template>
        </template>
        <template v-else>
            <el-input @change="valueChange" v-model="input" style="width: 65%;" v-bind="attrs.valueAttrs"/>
            <template v-if="typeof attrs.suffix === 'string'">
                <el-input @change="suffixChange" v-model="suffix" type="text" style="width: 35%;"
                          v-bind="attrs.suffixAttrs"/>
            </template>
        </template>
        <template v-if="Array.isArray(attrs.suffix)">
            <el-select @change="suffixChange" v-model="suffix" style="width: 35%;" v-bind="attrs.suffixAttrs"
                       placeholder=" ">
                <template v-for="obj in attrs.suffix">
                    <template v-if="typeof obj === 'string'">
                        <el-option :label="obj" :value="obj"/>
                    </template>
                    <template v-else>
                        <template v-if="Array.isArray(obj)">
                            <el-option :label="obj[0]" :value="obj[1]"/>
                        </template>
                        <template v-else>
                            <el-option :label="obj.label" :value="obj.value"/>
                        </template>
                    </template>
                </template>
            </el-select>
        </template>
    </div>
</template>

<script setup>
import {ref, useAttrs, watch} from "vue";

const attrs = useAttrs()
const suffix = ref('')
const input = ref('')

const props = defineProps({
    data: String
})

watch(props, (val, preVal) => {
    setValueAndSuffix(props.data)
})

const setValueAndSuffix = (val) => {
    const exceptionStr = '后缀目前只支持字符串和数组,例如:"suffix",["suffix1","suffix2"],[["suffixLabel","suffix"],["suffixLabel","suffix2"]]'
    if (typeof attrs.suffix === 'string') {
        if (val.indexOf(attrs.suffix) > -1) {
            input.value = val.split(suffix.value)[0]
            suffix.value = attrs.suffix
        }
    } else if (Array.isArray(attrs.suffix)) {
        for (let i = 0; i < attrs.suffix.length; i++) {
            if (typeof attrs.suffix[i] === 'string') {
                if (val.indexOf(attrs.suffix[i]) > -1) {
                    input.value = val.split(attrs.suffix[i])[0]
                    suffix.value = attrs.suffix[i]
                    break
                }
            } else if (Array.isArray(attrs.suffix[i])) {
                if (val.indexOf(attrs.suffix[i]) > -1) {
                    input.value = val.split(attrs.suffix[i])[0]
                    suffix.value = attrs.suffix[i][1]
                    break
                }
            } else {
                new TypeError(exceptionStr)
            }
        }
    } else {
        new TypeError(exceptionStr)
    }
}

setValueAndSuffix(props.data)

const emits = defineEmits(['update:data'])

const valueChange = () => {
    emits('update:data', input.value + suffix.value)
}

const suffixChange = () => {
    emits('update:data', input.value + suffix.value)
}

</script>

<style scoped>
.custom-com-input-suffix {
    display: inline-block;
}
</style>

        

例子:版本v2
支持直接type定制，使用element的后缀方式，前缀也可以类似实现

使用:

<InputSuffix type="number" v-model:data="inputS" :suffix="POSITION" inputClick/>

<template>
    <div class="custom-com-input-suffix" v-bind="attrs.divAttrs">
        <template v-if="attrs.inputClick !== undefined">
            <el-input :type="inputType" @input="valueChange" v-model="input" v-bind="attrs.valueAttrs">
                <template #append>
                    <template v-if="typeof attrs.suffix === 'string'">
                        <el-input @input="suffixChange" v-model="suffix" type="text"
                                  v-bind="attrs.suffixAttrs"/>
                    </template>
                    <template v-if="Array.isArray(attrs.suffix)">
                        <el-select @change="suffixChange" v-model="suffix"
                                   v-bind="attrs.suffixAttrs"
                                   placeholder=" ">
                            <template v-for="obj in attrs.suffix">
                                <template v-if="typeof obj === 'string'">
                                    <el-option :label="obj" :value="obj"/>
                                </template>
                                <template v-else>
                                    <template v-if="Array.isArray(obj)">
                                        <el-option :label="obj[0]" :value="obj[1]"/>
                                    </template>
                                    <template v-else>
                                        <el-option :label="obj.label" :value="obj.value"/>
                                    </template>
                                </template>
                            </template>
                        </el-select>
                    </template>
                </template>
            </el-input>
        </template>
        <template v-else>
            <el-input :type="inputType" @change="valueChange" v-model="input" v-bind="attrs.valueAttrs">
                <template #append>
                    <template v-if="typeof attrs.suffix === 'string'">
                        <el-input @change="suffixChange" v-model="suffix" type="text"
                                  v-bind="attrs.suffixAttrs"/>
                    </template>
                    <template v-if="Array.isArray(attrs.suffix)">
                        <el-select @change="suffixChange" v-model="suffix"
                                   v-bind="attrs.suffixAttrs"
                                   placeholder=" ">
                            <template v-for="obj in attrs.suffix">
                                <template v-if="typeof obj === 'string'">
                                    <el-option :label="obj" :value="obj"/>
                                </template>
                                <template v-else>
                                    <template v-if="Array.isArray(obj)">
                                        <el-option :label="obj[0]" :value="obj[1]"/>
                                    </template>
                                    <template v-else>
                                        <el-option :label="obj.label" :value="obj.value"/>
                                    </template>
                                </template>
                            </template>
                        </el-select>
                    </template>
                </template>
            </el-input>
        </template>
    </div>
</template>

<script setup>
import {ref, useAttrs, watch} from "vue";

const attrs = useAttrs()
const suffix = ref('')
const input = ref('')
const inputType = ref('type')

const props = defineProps({
    data: String
})

watch(props, (val, preVal) => {
    setValueAndSuffix(props.data)
})

if (attrs.type && attrs.type.length > 0) {
    inputType.value = attrs.type
}

const setValueAndSuffix = (val) => {
    const exceptionStr = '后缀目前只支持字符串和数组,例如:"suffix",["suffix1","suffix2"],[["suffixLabel","suffix"],["suffixLabel","suffix2"]]'
    if (typeof attrs.suffix === 'string') {
        if (val.indexOf(attrs.suffix) > -1) {
            input.value = val.split(suffix.value)[0]
            suffix.value = attrs.suffix
        }
    } else if (Array.isArray(attrs.suffix)) {
        for (let i = 0; i < attrs.suffix.length; i++) {
            if (typeof attrs.suffix[i] === 'string') {
                if (val.indexOf(attrs.suffix[i]) > -1) {
                    input.value = val.split(attrs.suffix[i])[0]
                    suffix.value = attrs.suffix[i]
                    break
                }
            } else if (Array.isArray(attrs.suffix[i])) {
                if (val.indexOf(attrs.suffix[i]) > -1) {
                    input.value = val.split(attrs.suffix[i])[0]
                    suffix.value = attrs.suffix[i][1]
                    break
                }
            } else {
                new TypeError(exceptionStr)
            }
        }
    } else {
        new TypeError(exceptionStr)
    }
}

setValueAndSuffix(props.data)

const emits = defineEmits(['update:data'])

const valueChange = () => {
    emits('update:data', input.value + suffix.value)
}

const suffixChange = () => {
    emits('update:data', input.value + suffix.value)
}

</script>

<style scoped>
.custom-com-input-suffix {
    display: inline-block;
}
</style>

qq_30620793
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue使用.sync 实现父子组件的双向绑定数据问题
10-17
主要介绍了Vue使用.sync 实现父子组件的双向绑定数据,需要的朋友可以参考下
vue3子组件可以直接修改父组件的数据了？
weixin_52444774的博客
08-11 722
然后仔细一查文档发现只有对象和数组类型的props数据可以更改。能成功，but是vue是禁止这样直接修改的，有缺点而且耗性能啥的。直接更改非对象或数组类型的props数据控制台是会报警告的，告诉你该数据是只读的。他竟然直接在子组件修改父组件传递过来的数据。而且代码实现还是成功的。所以说，咱还是乖乖自定义方法去修改props数据吧。在项目中，看到了同事的代码，一脸震惊！然后尝试重新写了个数据，发现是不成功的。吓得我以为vue3更新了。
【Vue3】Props的使用详解
null18的博客
03-03 1715
在Vue3中，Props是一种用于从父组件向子组件传递数据的重要机制。Props可以让我们以声明式的方式将数据传递到子组件，使得组件之间的通信更加简单和可靠。本文将详细介绍Vue3中Props的用法通过上述内容，我们可以看到在Vue3中如何使用Props来实现父子组件之间的数据传递，并掌握了Props的基本用法、属性验证、默认值设置等技巧。Props是Vue3中非常重要的一个特性，熟练掌握Props的使用将有助于我们更好地构建可复用、灵活的组件挑战与创造都是很痛苦的，但是很充实。
Vue3深入组件Props
性感码农在线写笔记
02-01 2656
vue3深入组件props
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
10-15
本文通过一个demo给大家介绍了vue子组件改变父组件传递的prop值通过sync实现数据双向绑定,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue3 devtools 版本6.5.0
05-04
GitHub上构建完的包，解压后，在Chrome插件管理-加载已解压的扩展程序，即可使用
【Vue3】父子组件双向数据绑定
cannotbecounted的博客
08-03 2667
对Vue3中父子组件双向数据绑定的实现进行简要的介绍。
子组件中修改props值 （setup + ts + vue3） | emit(‘update:value‘,value) 使用方法
fchf_001的博客
06-08 4589
父级 prop 的更新会向下流动到子组件中，但是反过来则不行。因此子组件中不可以修改prop值，否则会报错，导致程序无法运行。因为我怕命名混乱，所以父组件子组件中都使用的同一个命名 isCheck。父子 prop 之间存在一个。当前修改的key为只读属性。
Vue3子组件修改父组件的props使用v-model导致报错
akkigg的博客
11-17 3917
单向数据流 父级prop的更新会向下流动到子组件中，子组件中所有的 prop 都将会刷新为最新的值 但是反过来则不行。你不应该在一个子组件内部改变 prop。否则Vue 会在浏览器的控制台中发出如上图的警告 这是Vue官方防止从子组件意外变更父级组件的状态内容，这样会导致你应用的数据流向杂乱无章。
Vue3 props的使用详解
热门推荐
qq_45662523的博客
09-02 2万+
注意事项：defineprops在之前的Vue版本中需要引入
VUE3 子组件修改props数据，Unexpected mutation of “xxx“ prop解决方法
lzh6hao0的博客
04-18 4499
VUE3 子组件修改props数据; vue3 Unexpected mutation of "xxx" prop解决方法
Vue自定义组件双向绑定实现原理及方法详解
10-14
主要介绍了Vue自定义组件双向绑定实现原理及方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
08-28
父子组件通信，都是单项的，很多时候需要双向通信。这篇文章主要介绍了vue 自定义组件 v-model双向绑定、 父子组件同步通信,需要的朋友可以参考下
vue3中使用tinyMCE
07-01
vue3中使用tinyMCE的demo，setup语法糖写法，解压后请删除node_model包后重新cnpm i
vue3中使用vuedraggable
05-26
vue3中使用vuedraggable 内容概要：vue3中使用vuedraggable 适合人群：工作1-3年的前端人员
Vue3pdf中文文档
06-06
Vue3pdf中文教程
Vue3自定义组件库，Vue3项目
08-17
Vue3自定义组件库，Vue3项目
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 616
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1059
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
vue3父子组件双向绑定
08-26
在Vue 3中，父子组件之间的双向绑定可以通过v-model指令实现。下面是一个简单的示例： 父组件： ```html <template> <div> <h2>父组件</h2> <input v-model="message" placeholder="输入内容"> <p>子组件传递的值：{{ childMessage }}</p> <ChildComponent v-model="childMessage"></ChildComponent> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { message: '', childMessage: '' }; } }; </script> ``` 子组件 (ChildComponent.vue)： ```html <template> <div> <h3>子组件</h3> <input v-model="localValue" placeholder="输入内容"> <button @click="updateParentValue">更新父组件值</button> </div> </template> <script> export default { model: { prop: 'value', event: 'input' }, props: { value: { type: String, default: '' } }, data() { return { localValue: this.value }; }, methods: { updateParentValue() { this.$emit('input', this.localValue); } } }; </script> ``` 在父组件中，我们使用v-model指令将`message`变量与子组件的`childMessage`进行双向绑定。在子组件中，我们将`v-model`绑定到本地的`localValue`，并通过`updateParentValue`方法来触发`input`事件，将`localValue`值传递给父组件。 这样，父组件和子组件之间的值就可以实现双向绑定了。当父组件的`message`变化时，子组件的`localValue`也会跟着变化；当子组件的值变化时，会通过`input`事件将新值传递给父组件的`childMessage`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值