## 3 ways to create components
#The first type:
+ () function returns a component's constructor, which contains a parameter, the parameter is an object, and the object contains some configuration items.
+ () function uses the constructor returned by () to create an instance of a component with two parameters.;
Parameter 1: Component name, Parameter 2: Component constructor
Notice:
There can only be one root node in the template template
If the name of the component is named by camel, when using it, add "-"; for example: component name indexA-->index-a;
## The second type:
+ ('indexB',{template})
## The third type:
+ Define templates outside of Vue's jurisdiction by creating templates
## Summarize:
+ Create a template first, and create components
## Use directives in components:
+ In (), there is a template template, a data() function, and a method() method
+ Note: data() must be a function. It cannot be defined using attributes; an object is returned in the function.
## Method for parent component to pass values to child component
* Create parent and child components first
* In the son in the template of the parent component, the child component label is bound: attribute = data that the parent component needs to pass;
* In the son{} of the child component, use props to receive the data passed by the parent component;
* props are followed by an array, and the array is strings. These strings can be used as attributes, that is, props:['Attribute name']
* The code is as follows:
*
('father',{
template:'<div>....<son :myName="mySonName"></son></div>',
data(){
return{
mySonName:'Xiao Ming'
}
},
//Subcomponent components:{
son:{
props:['myName'],
template:'...{{myName}}'
}
}
})
## Method for child component to pass values to parent component
* Create parent and child components first;
* Use this.$emit() method in the child component methods method,
* This method has two parameters; Parameter 1: The event name needs to be exchanged with the parent component, and Parameter 2: the data to be passed;
* Use method name passing in the son tag of the parent component template:
Right now,@tellFatherMyname = "getMySonName";
* Pass the data parameter in the parent component's methods method, this data=the data passed by the child component, and then letmySonName = data;*
The code is as follows:
<div >
<father></father>
</div>
<script>
('father',{
template:`<div>
<p>My son told me that he was called{{mySonName}}</p>
<son @tellFatherMyname="getMySonName"></son>
</div>`,
data(){
return {
mySonName:'???'
}
},
methods:{
getMySonName(data){
(data);
= data;
}
},
components: {
son:{
data(){
return {
myName :'Xiao Ming'
}
},
template:`
<button @click = "emitMyname">Click to tell my father my name{{myName}}
</button>`,
//Use this.$emit() in the methods of the child component to pass the value; //$emit() has 2 parameters; Parameter 1: The event name that needs to be exchanged, Parameter 2: The data to be passed; Example like:
methods:{
emitMyname(){
this.$emit('tellFatherMyname',)
}
}
}
}
})
var vm = new Vue({
el:'#app',
data:{
}
})
</script>
### Create and pass values of brother components:
* When creating a brother's assembly, first create the parent component, and then create the son component and daughter component in the child component;
* Next is the passing value between the son component and the daughter component;
* dau --> son pass value
* In dau, first transmit an event name and the data to be passed through the event bus; that is, eventbus.$emit('event name','data')
* Event bus:
var eventbus = new Vue();
* First write a hook function in son, and then listen through eventbus.$on('event name',data=>{}) method to receive events transmitted by brother nodes
* $on() has two parameters, parameter 1: event name; parameter 2: function, the default value of the function is the data passed in * The code is as follows:
*
<div >
<!-- Render to the page here -->
<father></father>
</div>
<script>
// Create a vue empty instance first as the event bus var eventbus = new Vue();
('father',{
//Template for component display template:`<div>
<son></son>
<daughter></daughter>
</div>`,
components: {
son:{
data(){
return {
mySisterName:'???'
}
},
//Template for component display template:'<p>My sister told me she was called{{mySisterName}}</p>',
//Use hook function //Receive the passed data in the hook function through eventbus.$on('same event name',data) mounted(){
eventbus.$on('tellBroMyName',data=>{
= data;
})
}
},
daughter:{
data(){
return {
myName:'Lanlan'
}
},
template:'<button @click="emitMyName">Click to tell my brother my name{{myName}}</button>',
methods:{
// Just click the button and pass the event and data together. emitMyName(){
eventbus.$emit('tellBroMyName',)
}
}
}
}
})
var vm = new Vue({
el:'#app',
data:{
}
})
</script>
Summarize
The above is the method of creating and passing Vue components introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!