sse-hooks.js:1 [Vue warn]: Property or method “dynamicslotname” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in )

 <dy-component>
        <template v-slot:[dynamicSlotName]>
          我是动态插槽名
        </template>
      </dy-component>
Vue.component("dy-component", {
        template: `
        <span>
            <slot name="dy">
              你好动态插槽名one
            </slot>
          </span>
        `
      });
      var dTestVM = new Vue({
        el: "#dy-param",
        data: {
          atname: "href",
          url: "https://www.baidu.com",
          dynamicSlotName: "dy"
        }
      });

如果未message在data选项中声明,Vue会警告您render函数正在尝试访问不存在的属性。

改为:
  <dy-component>
        <template v-slot:[dyname]>
          我是动态插槽名
        </template>
      </dy-component>

 Vue.component("dy-component", {
        template: `
        <span>
            <slot name="dy">
              你好动态插槽名one
            </slot>
            <slot name="ct">
              我是CT
            </slot>
          </span>
        `
      });
 var dVmTest = new Vue({
        el: "#dy-param",
        data: {
          dyname: "op",
          atname: "href",
          url: "https://www.baidu.com"
        }
      });

由于:动态参数
在这里插入图片描述
还需要避免使用大写字符来命名键名,因为浏览器会把 attribute 名全部强制转为小写:

Logo

前往低代码交流专区

更多推荐