[JavaScript知识库]vue extend 的使用

前提：

使用之前需要在vue.config.js中添加

runtimeCompiler: true,

如图：

使用：

第一种：无参数

1. 创建index.js

图片：

代码：

import Vue from "vue";
var RootEle = Vue.extend({
    template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
    data: function () {
      return {
        firstName: 'Walter',
        lastName: 'White',
        alias: 'Heisenberg'
      }
    }
  })
export default RootEle

2. HelloWorld中加载

图片：

?代码：

<template>
  <div id="root"></div>
</template>

<script>
import RootEle from "../extend/index";
export default {
  data() {
    return {};
  },
  mounted() {
    new RootEle().$mount("#root");
  },
};
</script>

?第二种：传参数

图片：

?代码：

import Vue from "vue";
var RootEle = Vue.extend({
  template: "<p>{{firstName}} {{lastName}} aka {{alias}}</p>",
  props: ["firstName"],
  data: function () {
    return {
      lastName: "White",
      alias: "Heisenberg",
    };
  },
});
export default RootEle;

?图片：

?代码：

<template>
  <div id="root"></div>
</template>

<script>
import RootEle from "../extend/index";
export default {
  data() {
    return {};
  },
  mounted() {
    new RootEle({
      propsData:{
        firstName:'这是父组件传递过来的数据'
      }
    }).$mount("#root");
  },
};
</script>

第三种：传方法

使用? ?$on? ,? ?$emit

图片：

?代码：

import Vue from "vue";
var RootEle = Vue.extend({
  template:"<p @click='some_event'>{{firstName}} {{lastName}} aka {{alias}}</p>",
  props: ["firstName"],
  data: function () {
    return {
      lastName: "White",
      alias: "Heisenberg",
    };
  },
  methods: {
    some_event() {
      this.$emit("some_event", "这是方法传递过去的参数");
    },
  },
});
export default RootEle;

图片：

?代码：

<template>
  <div id="root"></div>
</template>

<script>
import RootEle from "../extend/index";
export default {
  data() {
    return {};
  },
  mounted() {
    const root = new RootEle({
      propsData: {
        firstName: "这是父组件传递过来的数据",
      },
    }).$mount("#root");
    root.$on("some_event", function (e) {
      console.log(e);
    });
  },
};
</script>

第四种：插槽数据

图片：

代码：?

import Vue from "vue";
var RootEle = Vue.extend({
  template: `<p>
{{firstName}} {{lastName}} aka {{alias}} 
<slot name='footer'/>
    </p>`,
  props: ["firstName"],
  data: function () {
    return {
      lastName: "White",
      alias: "Heisenberg",
    };
  },
});
export default RootEle;

图片：

?代码：

<template>
  <div id="root"></div>
</template>
<script>
import RootEle from "../extend/index";
export default {
  data() {
    return {};
  },
  mounted() {
    const root = new RootEle({
      propsData: {
        firstName: "这是父组件传递过来的数据",
      },
    });
    const h = this.$createElement;
    root.$scopedSlots = {
      footer: function () {
        return [
          h(
            "span",
            { style: { color: "red" } },
            "这是父组件传递过来的插槽数据"
          ),
        ];
      },
    };
    root.$mount("#root");
  },
};
</script>

第五种：作用于插槽

图片：

?代码：

import Vue from "vue";
var RootEle = Vue.extend({
  template: `<p>
{{lastName}} aka {{alias}} 
<slot name='footer' :message='firstName'/>
    </p>`,
  props: ["firstName"],
  data: function () {
    return {
      lastName: "White",
      alias: "Heisenberg",
    };
  },
});
export default RootEle;

图片：

?代码：

<template>
  <div id="root"></div>
</template>

<script>
import RootEle from "../extend/index";
export default {
  data() {
    return {};
  },
  mounted() {
    const root = new RootEle({
      propsData: {
        firstName: "这是父组件传递过来的数据",
      },
    });
    const h = this.$createElement;
    root.$scopedSlots = {
      footer: function (slotData) {
        return [h("span", { style: { color: "red" } }, slotData.message)];
      },
    };
    root.$mount("#root");
  },
};
</script>

另一种写法，不用js，直接用组件

图片：

代码：

<template>
  <div>
    {{ lastName }} aka {{ alias }}
    <slot name="footer" :message="firstName" />
  </div>
</template>
<script>
export default {
  props: ["firstName"],
  data: function () {
    return {
      lastName: "White",
      alias: "Heisenberg",
    };
  },
};
</script>

?图片：

代码：

<template>
  <div id="root"></div>
</template>

<script>
import Vue from "vue";
import ExtendExample from "./ExtendExample.vue";
export default {
  data() {
    return {};
  },
  mounted() {
    const RootEle = Vue.extend(ExtendExample);
    const root = new RootEle({
      propsData: {
        firstName: "这是父组件传递过来的数据",
      },
    });
    const h = this.$createElement;
    root.$scopedSlots = {
      footer: function (slotData) {
        return [h("span", { style: { color: "red" } }, slotData.message)];
      },
    };
    root.$mount("#root");
  },
};
</script>