Vue 笔记

Vue 动态注册组件

方法一

const MyTem = Vue.component('tem', {
		data: function() {
				return {
						childForms: { a:'',b:'' }
				}
		},
		methods: {
				submitForm() {
						// 表单数据能获取
						console.log('...log11...', this.childForms)
						// this 数据 $parent 为 null
						console.log('...log22...', this)

						// 下面方法或调用失败 因为 this.$parent 为 null
						this.$parent.getForms(this.childForms)
				}
		},
		template: `<div @click="submitForm">xxxx</div>`
})
const instance = new MyTem()
instance.$mount('#box')

方法二

<component v-if="templateName" :is="templateName"></component>

templateName = ''

init(){
	Vue.component('tem', {
		data: function() {
				return {
						childForms: { a:'',b:'' }
				}
		},
		methods: {
				submitForm() {
						// 表单数据能获取
						console.log('...log11...', this.childForms)
						// this 数据正常 $parent 正常
						console.log('...log22...', this)

						// 下面方法或调用成功
						this.$parent.getForms(this.childForms)
				}
		},
		template: `<div @click="submitForm">xxxx</div>`
	})
	this.templateName = 'tem'
}
...
mounted(){
	this.init()
}