Look back and sort out the knowledge points of vue.
assembly
<head> <meta charset="utf-8"> <title></title> </head> <body> <div id="root"> <table> /* It's easy for beginners to write like this: It is considered that after the global declaration of the component in vue, the name of the component declared can be written directly in the label. Although it can be rendered successfully here, the level rendered is wrong. We will find such a hierarchy: tbody myrow myrow myrow tbody Obviously, we want to show myrow inside tbody: But based on h5 grammar, tr should be stored under tbody. So the climax came: */ <tbody> <myrow></myrow> <myrow></myrow> <myrow></myrow> </tbody> /* It's easy for beginners to write like this: It is considered that after the global declaration of the component in vue, the name of the component declared can be written directly in the label. Although it can be rendered successfully here, the level rendered is wrong. We will find such a hierarchy: tbody myrow myrow myrow tbody Obviously, we want to show myrow inside tbody: But based on h5 grammar, tr should be stored under tbody. However, what we want to show is our own myrow component. So the climax came: */ <tbody> <tr is="myrow"></tr> <tr is="myrow"></tr> <tr is="myrow"></tr> </tbody> /*We write tr under tbody and add the is attribute of vue to tr, which means, Although this is the tr tag, what we really need to render is the "myrow" component. That's all settled. */ /* It's important to note that this bug comes from h5, for example: ul The tag below is the most desirable li, select The next best hope is option and so on. So when you play with components, you must look back at the hierarchy and remember! Out of the bug, please use is attribute to solve it */ </table> </div> </body>
Vue.component("myrow",{ template:"<tr><td>this is a row</td></tr>" }) var vm = new Vue({ el:"#root" })
ref and refs
Although vue does not recommend operation dom, in some cases, such as for "animation" requirements,
It's hard to just manipulate data. In vue, we use the combination of ref and refs to manipulate dom.
<div ref="hello" @click="handleclick()"> hello world</div>
var vm = new Vue({ el:"#root", methods:{ handleclick:function(){ alert(this.$refs.hello.innerHTML); //In this case, dom can be successfully operated. } } })
Be careful
When ref is written on a tag with refs, it gets the dom element of the tag. When written on a component, it represents a reference.
Demo Writes an Accumulator
<div id="root"> <com ref="one" @change='totaladd()'></com> <com ref="two" @change='totaladd()'></com> <div>{{total}}</div> </div>
Vue.component("com",{ template:"<div @click='handleClick()'> {{num}} </div>", data(){ return { num:0 } }, methods:{ handleClick(){ this.num++; this.$emit("change"); } } }) var vm = new Vue({ el:"#root", data(){ return{ total:0 } }, methods:{ totaladd(){ this.total = this.$refs.one.num+this.$refs.two.num } } })
Information transfer between parent and child components:
The parent component passes information to the child component in the form of attributes (plus colons), and the child component receives information using props.
<div id="root"> //If you pass an attribute, it will pass a number type of 1 // Pass directly, passing 1 of the string type <counter :count="1"></counter> <counter :count="2"></counter> </div>
Be careful:
Single Data Flow in vue: Multiple subcomponents use data passed by one parent component to prevent one subcomponent from modifying data and causing data disorder of all subcomponents. So you can't violate a single data stream. If you want to modify a data, you can define a variable on a subcomponent and assign the data to that variable. Then modify the variable. Otherwise, report "warn warning"
var counter = { // Use props to receive values after receiving a pass props:["count"], //Interpolation expression rendering template:"<div @click='handelClick()'>{{count}}</div>", //Objects defined to follow a single data stream data(count){ return { num :this.count } }, methods:{ handelClick(){ num++ } } } var vm = new Vue({ el:"#root", //Affirmation, component registration components:{ counter:counter } })
Subcomponents pass values to parent components: through events
this.$emit.("Event name")
The $emit can accept multiple parameters, the first parameter being the event name, and the latter being passed as a parameter to the listener's function.
<div @inc="handle"></div> //When triggered by emit listener, the handle function is executed this.$emit.("inc",5); //Write to div and monitor the inc. It's a casual inc. It's not just about inc. handle(step){ console.log(step); //5 step is the second parameter of emit } //This represents
Component Data Transfer Check
//html <child content="abcdef"></child> Vue.component('child',{ // props:['content'], where content is a string // If we want to constrain the passed data (parameter checking), we can write this // props:{ // content:[String,Number,Object] // }, //If the above is written as <child:content="123"></child> //So vue will report a warn because the colon passes in a number type //If <child content="123"> </child>, there would be no problem, because a string is passed in. //Write props:{content:[String,Number]} to indicate that the data passed can be either a number or a string. //Another way of writing: props:{ content:{ type:String, //Represents that the data passed in is the object type required:false, //And if you have to pass it or not, you will report an error. default:"{a:4}", //Set the default value, even if there is a default value, it will report an error if it is not passed. validator:function(content){ //Judging the specific attributes such as the length of the transmitted data return (content.length >2) //Failure of verification results in error reporting } } }, template:'<div>{{content}}</div>', data(){ return{ message:0 } } }) var vm = new Vue({ el:"#root" })
Binding native events for components
Previously, we wanted components to trigger events directly, using $emit. ("event name").
It takes two roundabouts to trigger, but actually it doesn't need to be so cumbersome. Just add. native after the @click on the outermost layer.
<mycomponent @click.native="hancleClick()"></mycomponent >
Data transfer between non-parent and child components (Bus/Bus/Publish-Subscribe/Observer)
//html <div id="root"> <child content="Juno"></child> <child content="Mak"></child> </div> //js Vue.prototype.bus = new Vue(); Vue.component("child",{ //Define a mycontent to conform to a single data stream data(){ return { mycontent:this.content } }, //data verification props:{ content:{ type:String } }, template:"<div @click='handleClick'>{{mycontent}}</div>", methods:{ handleClick:function(){ // Use bus to trigger the event $emit(change) externally and pass mycontent this.bus.$emit("change",this.mycontent); } }, //mount mounted:function(){ var _this = this; // Using bus to listen on bus is an implementation of vue, and there are also on Methods this.bus.$on("change",function(msg){ _this.mycontent = msg }) } }) var vm = new Vue({ el:"#root" })
Slot slot