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:[&#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:

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!