Home > Article > Web Front-end > Analysis of value transfer and slot usage of parent-child components in Vue
This time I will bring you an analysis of the value transfer and slot usage of the parent-child component in vue. What are the precautions for the parent-child component value transfer and slot usage in vue. The following is a practical case. Let’s take a look. .
1. Passing values from parent to child components
nbsp;html> <meta> <title>父子组件传值</title> <style> </style> <script></script> <p> <counter></counter> <counter></counter> </p><p>{{total}}</p> <validate-content></validate-content> <script> //父组件向子组件传值用 props ,加:号后传递的为js表达式,示例中则为数字,不加:号代表的是字符串 var counter = { //局部注册 props:['count'], data:function(){//在子组件中定义数据,data不能是对象,必须是一个函数。 return { number:this.count } }, template:'<p @click="handleClick2">{{number}}', methods:{ handleClick2:function(){ this.number ++; //this.count++; 父组件可以传值给子组件,但子组件不可以修改父组件属性,这里这么写会报错。 this.$emit("numberchange",this.number);//子组件向父组件传递事件,值 } } } var validateContent = { props:{ //content:[Number,String] //组件参数校验,可以多选 content:{//组件参数校验 type:String, required:true, default:"default value", validator:function(value){ return value.length > 5 } } }, template:'<p >{{content}}', } var vm = new Vue({ el:'#root', data:{ total:0 }, methods:{ handleChange:function(number){ console.log(number) // this.total +=1; } }, components:{ counter, //局部注册要在根节点注册组件 validateContent } }) </script>
2. Passing DOM from parent components to child components
Look at an example first
<p> <child><p>Qin</p></child> </p> <script> let child = { template :`<p> <p>hello world ` } var vm = new Vue({ el:'#root', components:{ child } }) </script>
Open the viewer to check
found that Qin is missing
<p>Qin</p>1
View the official documentation, https://cn.vuejs.org/v2/guide/components-slots.html
We come to the conclusion: if child does not contain a element, any content passed into it will be discarded
We add the slot
<p> <child><p>Qin</p></child> </p> <script> let child = { template :`<p> <p>hello world <slot> ` } var vm = new Vue({ el:'#root', components:{ child } }) </script>
It was found that Qin can be displayed normally, and the slot will be replaced with the parsed fragment Qin
When the parent component does not respond to the child When the component passes a value, slot can also appear as the default value of the parent component
<p> <child></child> </p> <script> let child = { template :`<p> <p>hello world <slot>default value ` } var vm = new Vue({ el:'#root', components:{ child } }) </script>
Rendering
##Named Slot
If you want to use multiple slots, let’s take a look at the effect first:<p> <child> <header>This is header</header> <footer>This is footer</footer> </child> </p> <script> let child = { template : `<p> <slot> <p>Main content <slot> ` } var vm = new Vue({ el:'#root', components:{ child } }) </script>
<p> <child> <header>This is header</header> <footer>This is footer</footer> </child> </p> <script> let child = { template : `<p> <slot name="header"> <p>Main content <slot name="footer"> ` } var vm = new Vue({ el:'#root', components:{ child } }) </script>
How to use VeeValidate to perform form verification in the vue project
How to use vue to implement 2048 Games
The above is the detailed content of Analysis of value transfer and slot usage of parent-child components in Vue. For more information, please follow other related articles on the PHP Chinese website!