Catalog
vue: parent child component value transfer
- Pass value from parent component to child component: the parent component passes parameters to the child component, and the child component receives parameters through props.
- Pass value from child component to parent component: the child component triggers an event monitored by the parent component through this.$emit, which will execute the method of the parent component and pass parameters to the parent component.
<!DOCTYPE html> <html lang="en"> <head> <meta chartset="UTF-8"> <title>Hello World</title> <script src='./vue.js'></script> </head> <body> <div id="app"> <div :style="{ fontSize: postFontSize + 'em' }">{{content}</div> <button @click="clickC1">The event that the parent component calls the child component</button> <!-- Parent component passes data to child component through property plus : What follows is js Expression--> <counter :count="0" ref="c1" v-on:enlarge-text="changeSize"></counter> <counter :count="1"></counter> </div> <script> var counter = { //Child receives parameters from parent props: ['count'], template: '<div @click="handleClick" >{{number}}</div>', data: function (){ return { number: this.count } }, methods: { handleClick: function() { //Warning: do not directly modify the value passed by the parent component. If a reference type is passed, the modification will affect other references. //this.count++; this.number++; //When a parent component listens to an event triggered by a value passed from a child component to a parent component, the method of the parent component is executed. this.$emit('enlarge-text',0.1); } }, } var vm = new Vue({ el: '#app', data: { content: 'hello world', postFontSize: 1 }, components: { counter: counter }, methods: { clickC1: function() { this.$refs.c1.handleClick(); }, changeSize: function(size) { this.postFontSize += size; } } }) </script> </body> </html>
vue: slot
The element is inserted in the middle of the component's label and can be matched according to the slot name. Use slots to change elements within a component.
<!DOCTYPE html> <html lang="en"> <head> <meta chartset="UTF-8"> <title>Hello World</title> <script src='./vue.js'></script> </head> <body> <div id="app"> <child content="<p>world</p>"> <p>slot</p> <h1 slot="header">Slot with name</h1> </child> </div> <script> Vue.component('child',{ props: ['content'], template: `<div> <p>hello</p> <div v-html="this.content"></div> <slot>Default content</slot> <slot name='header'></slot> </div>` }) var vm = new Vue({ el: '#app', }) </script> </body> </html>
vue: scope slot
The parent component calls the child component to pass a slot to the child component, which is called the scope slot. This slot must start and end with template. Declaration the data declared from the subcomponent is placed in the props subcomponent, and the item is bound and passed.
<body> <div id="app"> <child> <template slot-scope="props"> <li>{{props.item}}</li> </template> </child> </div> <script> Vue.component('child',{ props: ['content'], template: `<div> <ul> <slot v-for="item of list" :item=item> </slot> </ul> </div>`, data: function() { return { list: [1,2,3,4,5] } } }) var vm = new Vue({ el: '#app', }) </script> </body>
vue: dynamic components and v-once instructions
Use component tag to display components dynamically
The v-once instruction can make components not destroyed when switching, and put them in memory to improve performance.
<!DOCTYPE html> <html lang="en"> <head> <meta chartset="UTF-8"> <title>Hello World</title> <script src='./vue.js'></script> </head> <body> <div id="app"> <child> <button @click="handleClick">change</button> <component :is="type"></component> </child> </div> <script> //If v-once components are used, they will not be destroyed when switching, and they will be put into memory and retrieved, with higher performance. Vue.component('child-one',{ template: `<div v-once>child-one</div>`, }) Vue.component('child-two',{ template: `<div v-once>child-two</div>`, }) var vm = new Vue({ el: '#app', data: { type: 'child-one' }, methods: { handleClick: function() { this.type = this.type === 'child-one' ? 'child-two' : 'child-one'; } } }) </script> </body> </html>
vue: binding native events to components
If the component has already bound the native event, it will not work to bind the native event directly on the component. You need to use @ click.native to bind the native event.
<!DOCTYPE html> <html lang="en"> <head> <meta chartset="UTF-8"> <title>Hello World</title> <script src='./vue.js'></script> </head> <body> <div id="app"> <child @click1="handleClick" @click.native="nativeClick"></child> </div> <script> Vue.component('child',{ template: '<div @click="childClick">child</div>', methods: { childClick: function() { //Custom click1 this.$emit('click1'); } } }) var vm = new Vue({ el: '#app', methods: { handleClick: function() { alert(22); }, nativeClick: function(){ alert("Click component to trigger native event") } } }) </script> </body> </html>
vue: compute properties, methods, listeners
<!DOCTYPE html> <!-- Evaluate properties, methods, listeners --> <html> <head> <meta chartset="UTF-8"> <title>Evaluate properties, methods, listeners</title> <script src='./vue.js'></script> </head> <body> <div id="app"> {{fullName}} <!-- Usage method --> {{fullName2()}} {{full}} </div> <script> var vm = new Vue({ el: "#app", data: { firstName: "jx", lastName: "g", age: 18, full: 'full' }, //Calculation attribute cache: when the value of the calculation attribute depends on does not change, the previous value will be taken for the calculation attribute. computed: { fullName: function() { console.log("fullName"); return this.firstName + " " + this.lastName; } }, methods: { fullName2: function() { console.log("fullName2"); return this.firstName + " " + this.lastName; } }, //Using listeners watch: { firstName: function(){ this.full = this.firstName + " " + this.lastName; } }, }) </script> </body> </html>
vue: calculation properties set, get
<!DOCTYPE html> <html> <head> <meta chartset="UTF-8"> <title>Evaluate properties, methods, listeners</title> <script src='./vue.js'></script> </head> <body> <div id="app"> {{fullName}} </div> <script> var vm = new Vue({ el: "#app", data: { firstName: "jx", lastName: "g", age: 18, full: 'full' }, //Calculation attribute cache: when the value of the calculation attribute depends on does not change, the previous value will be taken for the calculation attribute. computed: { fullName: { get: function() { return this.firstName + " " + this.lastName; }, set: function(value) { var arr = value.split(" "); this.firstName = arr[0]; this.lastName = arr[1]; } } } }) </script> </body> </html>
vue: ref
ref can get components or dom elements
<div ref="hello" @click="handleClick">hello world</div> <counter ref="one" @change="handleChange"></counter> <counter ref="two" @change="handleChange"></counter>
this.$refs.hello.innerHTML this.total = this.$refs.one.number + this.$refs.two.number;