I've been watching Vue videos in recent days. I've watched the video of dark horse. It's very miscellaneous. I already have the basic knowledge of Vue, Webpack, VueUi framework Wait, it's messy, and it's very laborious to learn, and I don't know yet. The API behind the video has expired (I know it only after going to the official). I can only learn half of it and can't continue. Is it a special pit!
Recently, I found a set of qunar web APP, which is OK. Today, I can figure out the child components, the parent components, the value transfer between the child components and the parent components, as well as the fragmentary knowledge points, so as to forget and hope to help you.
No more nonsense, code up!
What are subcomponents? Parent component?
After reading many articles, I still didn't understand it. After reading the video explaining the child and parent components, I got it In fact, it is very simple. The most important thing is the value transfer between their parents and children
Subcomponents
When you create a component, the component name is the sub component
var option = Vue.extend({
props:['content','index'],
template:'<li @click="sendFather">{{content}}</li>'
})
Vue.component('item',option)//This item is a sub componentParent component
When you create a Vue instance, el need to bind div, then this div is the parent component
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="Vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="fade"> <!-- fade Is the parent component -->
</div>
</body>
</html>
<script>
var ss = new Vue({
el:"#fade"
})
</script>Registration of components
The first method
Vue.component('Component name',{
props://This location is used to define properties for subcomponents
// When defining data in a subcomponent, data must be a function that returns an object
data:function(){
return(){
}
}
})The second method
//Via Vue Extend ({}) create a subcomponent constructor (extend) to pass parameters,
Vue.component('item',option)
//Then it is introduced through the component name and the variable created by extend
var option = Vue.extend({
props:['content','index'],
template:'<li @click="sendFather">{{content}}</li>'
})
Vue.component('item',option)In addition, there are two ways to create components:
- Global registration (components can be used anywhere in the page)
- Local registration (components can only be used in Vue instances, not in other Vue instances)
Function of template
<!-- template The function of is to wrap the element, which will not be rendered to the page -->
<template v-for="dd of xiaomi">
<h1>?{{dd.name}}-----------?{{dd.prise}}}</h1>
</template>Method for dynamically changing object data
The first method: change the reference
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="Vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="fade">
<template >
<h1 v-for="list of obj">{{list}}</h1>
<!-- Add a method when clicking button When, an attribute is added -->
<button @click="add">Add object properties</button>
</template>
</div>
</body>
</html>
<script>
var ss = new Vue({
el:"#fade",
data:{
obj:{
name:"Zhang San",
age:20
}
},
methods:{
add:function(){
//Directly copy the original + new attributes
ss.obj={
name:"Zhang San",
age:20,
hobby:"hit?"
}
}
}
})
</script>The second method: Vue Set (instance. Object, 'new attribute', 'value')
<script>
var ss = new Vue({
el:"#fade",
data:{
obj:{
name:"Zhang San",
age:20
}
},
methods:{
add:function(){
//Add a new attribute through this line of code
Vue.set(ss.obj,"hobby","hit?")
}
}
})
</script>The third method: examples$ set (instance. Object, 'new attribute', 'value')
<script>
var ss = new Vue({
el:"#fade",
data:{
obj:{
name:"Zhang San",
age:20
}
},
methods:{
add:function(){
//Add a new attribute through this line of code
ss.$set(ss.obj,"hobby","hit?")
}
}
})
</script>Method for dynamically changing array data
1.Vue.set(example,array,Indexes,replace content)
2.example.$set(example,array,Indexes,replace content)
3.Some methods of array pop.......
4.Change reference
The child component passes values to the parent component
1.Pass in sub component this.$emit(A event)Pass value to parent component
2.Then, the parent component binds and listens for events in the child component tag A， A event="B "Event"
3.Then through the methods Medium processing B event,**Get sub component content**
< font color = Red > how to get sub component content?
this.$refs.This location is defined in the subcomponent ref name.Value to get r+this.$refs.This location is defined in the subcomponent ref name.Value to get; // Sum of subcomponents this.count = this.$refs.one.number+this.$refs.two.number;
How to get DOM nodes?
By defining on the element ref='xxxxx'， Then pass this.$refs.xxxx
Get node content
this.$refs.ref name.innerHTML
Get subcomponent value
this.$refs.ref name.Value to get
Component details
Sometimes there will be problems with template rendering. When using components in table, ul and select, you can write is = "component name" on the note, so that it will not have problems in page display!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="Vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="fade">
<table >
<!-- is Solve sub components in table，ul，select Problems displaying labels in -->
<tr is="item"></tr>
</table>
</div>
</body>
</html>
<script>
Vue.component('item',{
template:"<tr><td>Hello</td><td>world</td><tr>"
})
var ss = new Vue({
el:"#fade"
})
</script>