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>