3.1 details of component use
Detail 1:
Key: when we package tr into small components, there will be some small problems.
<body>
<div id="app">
<table>
<tbody>
<row></row>
</tbody>
</table>
</div>
<script>
Vue.component('row',{
template:'<tr><td>this is a row</td></tr>'
});
var vm = new Vue({
el: "#app"
});
</script>
</body>
Logically, it should be presented here;
How to rewrite it to run correctly?
Use is attribute
<div id="app">
<table>
<tbody>
<tr is="row"></tr>
</tbody>
</table>
</div>There are others, such as: UL, li under ol; option is required under select;
Detail 2:
The data of the root component can be defined as an object, but the data in the sub component needs to be defined as a function .
Reason: you want each sub component to have an independent data store.
Vue.component('row', {
data: function () {
return {
content: "this is a row"
}
},
template: '<tr><td>{{content}}</td></tr>'
});Detail 3: ref
How do I manipulate dom in Vue?
The ref attribute of all div s can be found through this.$refs;
<body>
<div id="app">
<div ref='hello' @click='handleClick'>Hello World</div>
</div>
<script>
var vm = new Vue({
el: "#app",
methods:{
handleClick:function(){
console.log(this.$refs);
}
}
});
</script>
</body>How to get the contents of div?
console.log(this.$refs.hello.innerHTML);
If ref is written on the component, what is obtained?
The obtained is the reference of the sub component
<body>
<div id="app">
<counter ref="one" @change="handleChange"></counter>
<counter ref="two" @change="handleChange"></counter>
<div>{{total}}</div>
</div>
<script>
Vue.component('counter',{
template:"<div @click='clickNumber'>{{number}}</div>",
data:function(){
return {
number:0
}
},
methods:{
clickNumber:function(){
this.number++;
this.$emit("change");
}
}
});
var vm = new Vue({
el: "#app",
data:{
total:0
},
methods:{
handleChange:function(){
this.total=this.$refs.one.number+this.$refs.two.number;
}
}
});
</script>
</body>
3.2 data transfer of parent-child components
Key: one way data flow stipulates that the child component cannot directly modify the value passed by the parent component. First define a variable in the data of the child component to receive it, and then modify the variable, so as not to report an error.
Father to son
<body>
<div id="app">
<counter :count="1"></counter>
</div>
<script>
var counter={
props:['count'],
data:function(){
return{
number:this.count
}
},
template:"<div @click='handleClick'>{{number}}</div>",
methods:{
handleClick:function(){
this.number++;
}
}
}
var vm = new Vue({
el: "#app",
components:{
counter:counter
}
});
</script>
</body>Child to parent:
<body>
<div id="app">
<counter :count="0" @change="handleChange"></counter>
<div>{{total}}</div>
</div>
<script>
var counter={
props:['count'],
data:function(){
return{
number:this.count
}
},
template:"<div @click='handleClick'>{{number}}</div>",
methods:{
handleClick:function(){
this.number++;
this.$emit("change",this.number);
}
}
}
var vm = new Vue({
el: "#app",
data:{
total:0
},
components:{
counter:counter
},
methods:{
handleChange:function(num){
this.total=num;
}
}
});
</script>
</body>3.3 component parameter verification and non props characteristics
Key: when the parent component passes data to the child component, the v-bind binding is not required to pass the string, but it is required to pass the number.
<body>
<div id="app">
<child :counter="111"></child>
</div>
<script>
Vue.component('child',{
props:{
counter:[Number,String]
},
template:'<div>{{counter}}</div>'
});
var vm = new Vue({
el: "#app",
});
</script>
</body>Constraints: either a number or a string can be passed
counter:[Number,String]
More properties:
counter:{
type:Number,
required:true,
default:'default value'
}Length verification: using the validator attribute
<body>
<div id="app">
<child counter="hell"></child>
</div>
<script>
Vue.component('child',{
props:{
counter:{
type:String,
required:true,
default:'default value',
validator:function(value){
return (value.length < 5)
}
}
},
template:'<div>{{counter}}</div>'
});
var vm = new Vue({
el: "#app",
});
</script>
</body>Non props characteristics:
1. If the parent component passes a value to the child component, but the child component does not receive it (the props receiving parameter is not used), an error will be reported;
2. The parent component passes values to the child component, but the child component is dead. At this time, the attribute values passed by the parent component will be displayed on the dom element of the child component;
<body>
<div id="app">
<child counter="hell"></child>
</div>
<script>
Vue.component('child',{
template:'<div>hell</div>'
});
var vm = new Vue({
el: "#app",
});
</script>
</body>
3.4 binding native events to components
The key is whether the event modifier is added: native; If the clicked sub component is not added with native, @ Click's click will be regarded as a custom event. If you want to trigger it, you need to use the $emit method, which is more troublesome.
<body>
<div id="app">
<child @click.native="handleClick"></child>
</div>
<script>
Vue.component('child',{
template:'<div>hello world</div>'
});
var vm = new Vue({
el: "#app",
methods:{
handleClick:function(){
alert("hello world");
}
}
});
</script>
</body>3.5 value transfer between non parent and child components (Bus / Bus / publish subscribe mode / observer mode)
Key: there is no parent-child relationship and value transfer is complex. One is Vuex, the other is bus mechanism.