Vue Medium Father Child Components Note, Piped Value and SLOT Application Skills

a. Sons assembly by value

       Sons assembly by value        
{{total}}
// parent component subassembly to pass values ​​the props, plus: the number of transmitting js expression, compared with the example numbers, without: represents the number string var counter = { // local registration props: [ 'count'], data: function () {// definition data in the subassembly, data can not be an object, you must be a function. return {number: this.count}}, template: '
{{number}}
', methods: {handleClick2: function () {this.number ++; //this.count++; parent may pass value to sub-assemblies, sub-assemblies but can not modify the parent component properties, so write here will complain. . This $ emit ( "numberchange", this.number); // transmitted to the parent sub-assembly component events, value}}} var validateContent = {props: {// content: [Number, String] // check parameters component can be multiple choice conTENT: {// Component Parameter Check Type: String, Required: True, Default: "Default Value", Validator: Function (Value) {Return Value.Length> 5}}}, template: '
{Content }}
',} VAR VM = New Vue ({EL:' # root ', Data: {Total: 0}, methods: {handlechange: function (number) {console.log (number) // this. Total + = 1;}}, components: {counter, // Local registration To register in the root node registration component validatecontent}})

II. Parent components pass DOM

first look at

   

Let Child = {Template: `
Hello World

`} VAR VM = NEW VUE ({EL: '# root', Components: {child}}

Open viewer to view

vue中父子组件注意事项,传值及slot应用技巧

1


View official documentation, https: // CN.Vuejs.org/v2/guide/components-slots.html

We conclude: If Child does not include a

element, any incoming content will be abandoned

We join slot

let child = { Template: `
  `} var VM = new Vue ({EL: '# root', Components: {child}}) 

I found that QIN can be displayed normally, and SLOT will be replaced with post-parsing fragment
Qin

When the parent component does not pass values ​​to the sub-component, Slot can also appear as the default value of the parent component

Let Child = {Template: “

Hello World

vue中父子组件注意事项,传值及slot应用技巧 Default Value

`} var VM = new Vue ({EL: ‘# root’, Components: {child}})

Rendering
   
Title slot
If you want to use multiple slots, let's take a look at the effect:

THIS Header
This is Footer
let Child = {Template : `

Main Content

vue中父子组件注意事项,传值及slot应用技巧

`} VAR VM = New Vue ({EL: ‘# root’, Components: {child}}

There are many Header and Footer, and to solve this problem, it is necessary to use the name slot
 We modify the code as follows:   
This is header
this is footer
let child = { Template: `

`} var VM = new Vue ({EL: '# root', Components: {child} })
Can see normal

vue中父子组件注意事项,传值及slot应用技巧 summary

The above is a small-knit introduction to the VUE middle-parent sub-component precaution, the pass value, and the SLOT application skills, I hope that everyone can help, if you have any questions, please leave a message, Xiaobian Will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website!


© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment