How to create components
// 1.1 use Vue.extend to create a global Vue component
var com1 = Vue.extend({
// Through the template attribute, the HTML structure to be displayed by the component is specified
template:'<h3>This is used. Vue.extend Components created</h3>'
})
// 1.2 use Vue.component('name of component ', created component template object)
Vue.component('myCom1',com1)Use Vue.extend({}) to create a global template object for Vue, where template specifies the HTML structure the component will display, and then use Vue.component to define a component.
Here's a shorthand
Vue.component('myCom1',{
// Note: no matter which way the component is created, the template attribute of the component points to the content of the template,
// There must be and only one unique root element
template:'<div><h3>This is used. Vue.component Components created directly</h3><span>123</span></div>'
})Note: no matter which way the component is created, the template content pointed to by the template attribute of the component must have only one root element
Create private components
let vm2 =new Vue({
el:'#app2',
data:{},
methods:{},
components:{
login:{
template:"<h1>This is private login assembly</h1>"
}
}, //Define the
})Private components are defined through the components property. You can use the < login > < login > tag in the HTML structure through the above methods.
Data data of components
1. Components can have their own data.
2. The data data in the component is different from that in the instance. The data in the instance can be an object, but the data in the component must be a method.
3. In addition to being a method, the data in the component must return an object internally
Vue.component('myCom',{
template:'<h1>This is a global component-----{{msg}}</h1>',
data:function(){
return {
msg:'111'
}
}
})How to switch components
<body>
<div id="app">
<a href="" @click.prevent ='flag =true'>Sign in</a>
<a href="" @click.prevent ='flag =false'>register</a>
<login v-if='flag'></login>
<register v-else='flag '></register>
</div>
<script>
Vue.component('login',{
template:'<h1>Login component</h1>'
})
Vue.component('register',{
template:'<h1>Registration component</h1>'
})
let vm =new Vue({
el:'#app',
data:{
flag:true
},
methods:{}
})
</script>
</body>You can use the above methods to switch components, define a flag variable, and use v-show to switch components continuously. However, there is a disadvantage in this method. You can only choose to switch between the two components, so the following methods are recommended.
<body>
<div id="app">
<a href="" @click.prevent ='isCom="login"'>Sign in</a>
<a href="" @click.prevent ='isCom="register"'>register</a>
<!-- Vue Provided component，To show the component with the corresponding name -->
<!-- component Is a placeholder,:is Property, which can be used to specify the name of the component to display -->
<component :is="isCom"></component>
</div>
<script>
Vue.component('login',{
template:'<h1>Login component</h1>'
})
Vue.component('register',{
template:'<h1>Registration component</h1>'
})
let vm =new Vue({
el:'#app',
data:{
isCom:'login'
},
methods:{}
})
</script>
</body>Vue provides component to display components with corresponding names. Component is a placeholder and: is property. It can be used to specify the names of components to display, so that multiple components can be switched.
The problem of value transfer between components
The parent component passes a data data to the child component
<body>
<div id="app">
<!--
//When the parent component can refer to the child component again, it needs to pass the
//The data to the subcomponent, in the form of property binding, is passed to the internal of the subcomponent for use by the subcomponent
-->
<com1 :parentmsg="msg"></com1>
</div>
<script>
let vm =new Vue({
el:'#app',
data:{
msg:'123'
},
methods:{},
components:{
com1:{
// The data data in the child component is not passed through the parent component, but is private to the child component itself
data(){ //Data in data is readable and writable
return {
title:'213',
content:'qq'
}
},
template:'<h1>This is a subcomponent---------{{parentmsg}}</h1>',
// Note: all the data in props in the component is passed to the child component through the parent component
// Data in props is read-only and cannot be reassigned
props:[ //Define the parentmsg property passed from the parent component in the props array, so that the data can be used
'parentmsg'
]
},
}
})
</script>
</body>When a parent component can refer to a child component again, the data that needs to be passed to the child component is passed to the internal of the child component in the form of attribute binding through the form of attribute binding. In the child component, define the value passed from the parent component in the props array before use.
Note: the data in props can only be read or written, and the value passed by the parent component in props cannot be modified in the child component
Parent component passes a method to child component
<body>
<div id="app">
<!--
//The parent component passes methods to the child component, using the event binding mechanism; v-on shorthand@
//When we customize an event property, the subcomponent can call the method passed in in some ways
-->
<com2 @func="show"></com2>
</div>
<template id="tmpl">
<div>
<h1>This is a subcomponent</h1>
<input type="button" value="This is the button for the subcomponent" @click='myclick'>
</div>
</template>
<script>
// Defines a component template object of literal type
var com2 ={
template:'#tmpl',
data(){
return{
}
},
methods:{
myclick(){
this.$emit('func',123)
}
}
}
let vm =new Vue({
el:'#app',
data:{
},
methods:{
show(data){
console.log("Method of parent component called"+ data)
}
},
components:{
com2,
}
})
</script>
</body>When a parent component passes a method to a child component, it uses the event binding mechanism (v-on abbreviation @). After we customize an event property, the child component can use this method in some ways. In the child component, you can call the method passed by the parent component through this.$emit(), and when you need to pass in parameters in the method, you can pass in corresponding parameters in the second parameter.
You can use this.$emit() method to pass values from child components to parent components, for example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<com2 @func="show"></com2>
</div>
<template id="tmpl">
<div>
<h1>This is a subcomponent</h1>
<input type="button" value="This is the button for the subcomponent" @click='myclick'>
</div>
</template>
<script>
// Defines a component template object of literal type
var com2 ={
template:'#tmpl',
data(){
return{
sonmsg:{name:'kobe',age:32}
}
},
methods:{
myclick()
this.$emit('func',this.sonmsg)
}
}
}
let vm =new Vue({
el:'#app',
data:{
predata:null
},
methods:{
show(data){
this.predata =data
}
},
components:{
com2,
}
})
</script>
</body>
</html>
