Vue components can be divided into global components and local components. Global components are not used much, but local components are used more. The creation method is to use Vue.extend(options) to create, where options and the options passed in when new Vue(options) are almost the same, but there are also some differences: do not write el, data can no longer be written as an object, and must be written as a function. Generally, partial components are used more in single-page applications. Partial components belong to a Vue instance and are added (mounted) through comopnents. Registering components: local registration: you need to pass in the components option when new Vue, global registration: Vue.component ('component name', component), the component can be defined and placed, or it can be directly in the form of an object. Written in Vue.component.
Here are the steps and methods to actually define the registered usage component:
<div id="app">
<school></school>
<hr>
<student></student>
<hello></hello>
</div>
//
<div id="app2">
<hello></hello>
</div>
<div id="app3">
<app/>
</div>
<script>
Vue.config.productionTip=false
Vue.component("hello",{
name:"HHHH",
template:`
<div>
<div>{{helloName}}</div>
<button @click="show">click</button>
</div>
`,
data(){
return{
helloName:"hellollll"
}
},
methods: {
show(){
alert("hahaha");
}
},
});
//
const person={
template:`
<div>
Page:<input v-model="personAge"/>
</div>
`,
data(){
return{
personAge:100
}
}
};
//
const school=Vue.extend({
template:`<div>
<p>{{schoolName}}</p>
<p>{{schoolAddr}}</p>
</div>`,
data(){
return{
schoolName:"helloSChool",
schoolAddr:"beijing"
}
}
});
const student=Vue.extend({
template:`<div>
<p>{{studentName}}</p>
<p>{{studentAge}}</p>
<person></person>
// <hello></hello>
</div>`,
data(){
return{
studentName:"aaa",
studentAge:18
}
},
components:{
person:person,
}
});
// console.log(student instanceof VueComponent);
// console.log(student.__proto__ instanceof Vue);
// console.log(student.__proto__);
//
const app={
template:`
<div>
<hello></hello>
<school></school>
<student></student>
</div>`,
components:{
school:school,
student:student
}
}
var vm = new Vue({
el: '#app',
// data: {},
// methods: {},
components:{
school:school,
student:student
}
});
// console.log(student instanceof vm);
console.log(student.__proto__===vm.prototype);//false
console.log(student.__proto__.__proto__===vm.__proto__);//false
console.log(student.__proto__===Vue);//false
console.log(student.prototype.__proto__===Vue.prototype);//true
new Vue({
el:"#app2",
})
new Vue({
el:"#app3",
components:{
app:app
}
});
</script>
Comments
Post a Comment