使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
1.Vue.extend 获得是一个构造函数，可以通过实例化生成一个 Vue 实例
2.实例化时可以向这个实例传入参数，但是需要注意的是 props 的值需要通过 propsData 属性来传递
- $mount挂载是替换
<html>
<head>
<title>extend</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div id='app-mount'></div>
</div>
</body>
<script>
// vue实例
let vue =new Vue({
el:'#app',
});
//要挂载的组件
let dialog =Vue.extend({
template:`<div class="dialog">
<h1 class="title">{{title}}</h1>
<div @click="cancel">{{cancelText}}</div>
<div @click="confirm">{{sureText}}</div>
</div>`,
props:{
title:String,
cancelText:{
type:String,
default:"取消",
},
sureText:{
type:String,
default:"确定",
},
colse:{
type:Function,
default:()=>{}
}
},
methods:{
cancel(){
console.log('取消');
this.colse();
},
confirm(){
console.log('确定');
this.colse();
},
}
});
const ele = new dialog({
propsData:{
title:'标题',
cancelText:'取消1',
sureText:'确定1',
colse:function(){
ele.$el.remove()
}
}
}).$mount('#app-mount')
</script>
</html>
