new Vue.extend 创建的实例如何传递 $attrs 属性？

• Z时代
• 2024-03-10
• 分类：IT

请问使用 Vue.extend 创建出来的实例, 如何传递 attrs 属性呢？

调用代码：

const VueConstructor = Vue.extend(componentA);
const instance = new VueConstructor({
  propsData: {
    placeholder: "xxx",
    aaa: "xxxx",
  },
});
instance.$mount();
document.querySelector("#test").appendChild(instance.$el);

componentA 组件代码：

props: ['placeholder'],
created() {
  console.log("this.$attrs", this.$attrs); // 不能看到 placeholder 和 aaa
  console.log("this.$props", this.$props); // 能看到 placeholder, 不能看到 aaa
}

如何才能使用 Vue.extend 创建的实例达到下面这种效果呢? 或者有替代方案吗？

<componentA placeholder="xxx" aaa="xxx"/>

回答：

Vue.extend({
  template: '<componentA :placeholder="placeholder" />',
  data() {
    return {
      placeholder: "xxxx"
    }
  }
})

回答：

var instance = new VueConstructor({
      propsData: {
        placeholder: "xxx",
        aaa: "xxxx",
      },
      _parentVnode: {
          data: {
              attrs: {
                  bbb: 'ccccc'
              }
          }
      }
});

以上是 new Vue.extend 创建的实例如何传递 $attrs 属性？ 的全部内容， 来源链接： utcz.com/p/937241.html