可以动态绑定v-model或者prop吗?

版本2.6.1,是动态绑定,不是绑定动态数据,比如在mounted中用js给某个元素绑定prop。

我感觉你好像需要这个

<el-input
  v-model="refText"
  v-bind="textProps"
  @input="myInput"
>

const textProps = reactive({
  title: '提示信息',
  maxLength: 10,
  placeholder: '占位信息',
  disabled: false,
  'prefix-icon': Edit
})

textProps[新的属性] = xxx

当然也可能是我感觉错了。

我想要的是类似vm.$set 这样的操作;
其实是有点异想天开,想给插槽绑定v-model或者数据;
感谢你的回答,v-bind绑定对象也对我有启发。

插槽可以绑定数据呀,难道vue2.x的插槽不支持吗?
我是直接学的vue3。

是接收插槽的元素绑定哦,不是传递插槽的元素,比如给一个dialog对话框传递一个插槽内容,dialog组件似乎没办法给绑定数据,例如

<template>
  <slot name="default" :value="value"></slot>
</template>

插槽属于父组件,不属于子组件。
子组件想要传递数据给插槽的话,需要使用 解构插槽 Prop

<todo-list v-slot="{ item }">
  <i class="fas fa-check"></i>
  <span class="green">{{ item }}</span>
</todo-list>

好吧,挺绕的。

v-slot 确实可以让插槽访问子组件的内容,不过我希望让这个操作在子组件里完成而不是父组件,我想让父组件代码尽可能少些,如果没有办法的话还是只能在父组件里传入

插槽是为了实现灵活性,而不是为了父组件代码少。
父组件想代码少,那就把功能做到子组件。
灵活性和便捷性(代码少)本来就是矛盾的。
话说,你到底啥需求呀。

做配置项一类的东西,想把一个组件做成既支持弹窗形式,又支持直接嵌在组件里,组件嘛当然是使用越简单越好最好一个prop控制是否弹窗;
这样可以实现:

<dialog v-if="isDialog">
  <div>
    <!--内容-->
  </div>
</dialog>
<div v-else>
  <!--内容-->
</div>

不过这样感觉代码有点冗余,多做几个同类的话我就想能不能把对话框跟内容拆开:

<!--直接嵌入-->
<custom-input></custom-input>
<!--弹窗显示-->
<custom-dialog>
  <custom-input></custom-input>
</custom-dialog>

结果没有成功,当然用结构的话是可以的,不过调用起来就麻烦了

https://naturefw.gitee.io/nf-rollup-ui-controller/meta-base
是这样的配置项吗?菜单第一个。

不太明白你的意思是什么,不过我想到大概解决方案了,利用动态组件来决定外层,就不用写两份一样的代码了:

<!--调用组件-->
<template>
  <p>当前text:{{ text }}</p>
  <amphibian-input v-model="text"></amphibian-input>
  <amphibian-input v-model="text" isDialog></amphibian-input>
</template>

<script>
import AmphibianInput from "./amphibian-input";
export default {
  components: { AmphibianInput },
  data() {
    return {
      text:""
    }
  }
}
</script>
<!--组件amphibian-input-->
<template>
  <span>
    <el-button v-if="isDialog" type="primary" @click="visible = true">编辑</el-button>
    <component :is="isDialog ? 'el-dialog' : 'span'" :title="title" :visible.sync="visible" append-to-body>
      <!--实际情况下input会替换为一些v-model形式的内容-->
      <el-input v-model="value_" @input="valueChange"></el-input>
      <span v-if="isDialog" slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="updateValue">确 定</el-button>
      </span>
    </component>
  </span>
</template>

<script>
export default {
  props: {
    value: { type: String, default: "" },
    title: { type: String, default: "属性编辑" },
    isDialog: { type: Boolean, default: false },
  },
  data() {
    return { visible: false, value_: "" };
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.value_ = JSON.parse(JSON.stringify(val));
      },
    },
  },
  methods: {
    valueChange(val) {
      if (!this.isDialog) this.$emit("input", val);
    },
    updateValue() {
      this.$emit("input", this.value_);
      this.visible = false;
    },
  },
};
</script>

<style scoped></style>