Detailed explanation of Vue parent-child component value transfer and slot application steps

This time I will bring you a detailed explanation of the value transfer and slot application steps of the vue parent-child component. What are the precautions for the value transfer and slot application of the vue parent-child component. 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:[&#39;count&#39;],
     data:function(){//在子组件中定义数据，data不能是对象,必须是一个函数。
       return {
         number:this.count
       }
     },
     template:&#39;<p @click="handleClick2">{{number}}&#39;,
     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:&#39;<p >{{content}}&#39;,
   }
   var vm = new Vue({
     el:&#39;#root&#39;,
     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:&#39;#root&#39;,
     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:&#39;#root&#39;,
     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:&#39;#root&#39;,
     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:&#39;#root&#39;,
     components:{
       child
     } 
   })
  </script>

It is found that multiple headers and footers appear. To solve this problem, we need to use named slots

We modify the code as follows:

  <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:&#39;#root&#39;,
     components:{
       child
     } 
   })
  </script>

You can see that the display is normal

I believe it After reading the case in this article, you have mastered the method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the steps to add, delete and modify JavaScript DOM elements

VeeValidate form verification use case in vue project Code analysis

The above is the detailed content of Detailed explanation of Vue parent-child component value transfer and slot application steps. For more information, please follow other related articles on the PHP Chinese website!