Vue远程加载页面vue.extend用法研究

场景

• 需要动态添加一段Html到页面，但是新添加的页面@click等事件不执行

原因

• vue的template中的内容是需要编译以后才能运行，绑定的事件也是编译后才可以运行，动态添加的Html实际上是加入了编译后的页面，所以里面的@click这种方法不会被再次编译，于是就不会执行

解决方案

• 在网上查阅大量资料后发现有两种方法解决这个问题：
• 1，把动态Html中的事件注册成全局事件，通过onclick调用全局事件；
• 2，把动态Html中调用Vue.extend()编译一次，把编译后的代码插入页面；

开搞

注册全局事件方法

<template>
	<div>
		<div><button type="button" @click="addHtml">测试button>div>
		<div id="testId">div>
	div>
template>

<script>
	export default{
		created() {
			window.testBtn=this.testBtn//全局注册，不要打括号
		},
		methods:{
			/**
			 * 测试按钮方法：动态添加一段Html到页面中
			 */
			addHtml(){
				let html=`按钮`;
				$('#testId').append(html)
			},
			/**
			 * 动态Html中的事件
			 * @param {Object} obj 动态Html的dom
			 */
			testBtn(obj){
				console.log('this is testBtn',$(obj));
			}
		}
	}
script>

• window.testBtn=this.testBtn – 注册了一个全局事件，编译后可以直接调用，不要加括号
• onclick="testBtn(this)" – 通过Html自带的onclick去调用全局方法，
• 这种方法多半配合Jquery来使用，因为jquery可以通过获取dom来操作下面的步骤，this是控件本身
• $(obj) – jquery包裹的对象，就是动态Html的dom，通过获取他可以做其他操作
• 优点：事件较为简单
• 缺点：实际上这是一种曲线救国，可以执行，但是Vue的this中的参数不能使用了，但可以配合jquery来操作下面的功能
• jquery在vue中使用看上篇文章

编译Html再插入方法

<template>
	
	<div>
		<div><button type="button" @click="addHtml">测试button>div>
		<div>{{d}}div>
		<div id="testId">div>
	div>
template>

<script>
	
	import Vue from 'vue/dist/vue.esm.js'//避免提示runtime模式不能使用
	
	export default{
		data(){
			return{
				d:'dddd'//初始挂载的参数
			}
		},
		methods:{
			/**
			 * 测试方法：添加动态Html到页面，每次都要编译一次
			 */
			addHtml(){
				let that=this
				const testComponent = Vue.extend({
				  template: `
{{text}},${that.d},{{dd}}`,
				  data: function () {
				    return {
				      text: '子组件一个值',
				      dd:that.d
				    }
				  },
				  methods:{
					  open(){
						  this.dd='修改子组件的值'
						  that.d='修改父组件值'//子组件可以获取父组件值，但是不能双向绑定，需要手动修改
					  }
				  }
				})
				const extendComponent = new testComponent().$mount('#testId')//直接挂载
				// document.getElementById('testId').appendChild(extendComponent.$el)//原生js方法插入
				//$('#testId').append(extendComponent.$el)//Jquery方法插入
			}
		}
	}
script>

• Vue.extend() – 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。https://cn.vuejs.org/v2/api/index.html#Vue-extend
• $mount – 手动挂载 https://blog.csdn.net/github_37516320/article/details/78321391
• addHtml中的方法就是把动态html手动编译，手动挂载，手动插入页面
• ${that.d} – 使用初始挂载的参数
• .$mount() – 也可以直接挂载.$mount('#testId')
• ${that.d} – 这样是可以获取外部值，但是无法绑定
• {{dd}} – 通过父组件赋值给子组件变量方法，也可以获取值，但是无法双向绑定，需要手动设置父组件值
• 获取父组件需要在main.js中注册一个全局变量

//main.js中定义
window.$globalHub  = new Vue({
  render: h => h(App),
}).$mount('#app')
//页面中使用
console.log(window.$globalHub);//可以通过该方法获取$store,自定义的js方法等

参考资料

• Vue.extend创建实例共享变量问题
• Vue中extend extends minin
• https://www.cnblogs.com/hentai-miao/p/10271652.html
• https://cn.vuejs.org/v2/api/index.html#Vue-extend
• https://blog.csdn.net/wxl1555/article/details/83187647
• https://segmentfault.com/a/1190000020061342
• https://blog.csdn.net/m0_38004177/article/details/106375775
• https://www.jianshu.com/p/398825b673e7
• https://blog.csdn.net/weixin_42633131/article/details/100579381?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_title~default-1.no_search_link&spm=1001.2101.3001.4242