vue中父子组件注意事项，传值，slot应用

最新推荐文章于 2024-04-07 00:14:45 发布

Qin__

最新推荐文章于 2024-04-07 00:14:45 发布

阅读量3.1k

点赞数

分类专栏：前端学习文章标签： vuejs

本文链接：https://blog.csdn.net/Uookic/article/details/80249609

版权

前端学习专栏收录该内容

33 篇文章 0 订阅

订阅专栏

这是一篇学习笔记

一.父子组件传值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>父子组件传值</title>
    <style> 
    </style>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">  
        <counter :count="0" @numberchange="handleChange"></counter>
        <counter :count="0" @numberchange="handleChange"></counter>
        <div>{{total}}</div> 
        <validate-content content="hello world"></validate-content>
    </div>
    <script> 

      //父组件向子组件传值用 props ,加：号后传递的为js表达式,示例中则为数字，不加:号代表的是字符串 
      var counter = { //局部注册 
         props:['count'],

         data:function(){//在子组件中定义数据，data不能是对象,必须是一个函数。
             return {
                 number:this.count
             }
         },
         template:'<div @click="handleClick2">{{number}}</div>',
         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:'<div >{{content}}</div>',
      }

      var vm = new Vue({
          el:'#root',
          data:{
             total:0
          },
          methods:{ 
            handleChange:function(number){ 
                console.log(number)
               // this.total +=1;
            }
          },
          components:{
             counter,  //局部注册要在根节点注册组件
             validateContent
          }
      })
    </script>
</body>
</html>

二.父组件向子组件传递DOM
先看一个示例

<body>
    <div id="root">  
       <child><p>Qin</p></child>
    </div>
    <script>  
      let child = {
          template :`<div>
                     <p>hello world</p> 
               </div>`
      }
      var vm = new Vue({
          el:'#root',
          components:{
              child
          } 
      })
    </script>
</body>

打开查看器查看一下
这里写图片描述

发现Qin不见了

<p>Qin</p>

查看官方文档 ,https://cn.vuejs.org/v2/guide/components-slots.html
我们得出结论：如果 child 没有包含一个 < slot > 元素，则任何传入它的内容都会被抛弃
我们加入插槽

<body>
    <div id="root">  
       <child><p>Qin</p></child>
    </div>
    <script>  
      let child = {
          template :`<div>
                     <p>hello world</p>
                     <slot></slot>
               </div>` 
      }
      var vm = new Vue({
          el:'#root',
          components:{
              child
          } 
      })
    </script>
</body>

发现Qin能正常显示，且slot将会被替换为解析后的片段 < p > Qin < /p >
这里写图片描述

当父组件不向子组件传值的时候，slot还可以作为父组件默认值出现

<body>
    <div id="root">  
       <child></child>
    </div>
    <script>  
      let child = {
          template :`<div>
                     <p>hello world</p>
                     <slot>default value</slot>
               </div>`
      }
      var vm = new Vue({
          el:'#root',
          components:{
              child
          } 
      })
    </script>
</body>

效果图

具名插槽
如果想使用多个插槽，我们先看看效果：

<body>
    <div id="root">  
       <child>
           <header>This is header</header>
           <footer>This is footer</footer> 
       </child>
    </div>
    <script>  
      let child = {
          template :
              `<div>  
                     <slot></slot>
                     <p>Main content</p>
                     <slot></slot>
               </div>`
      }
      var vm = new Vue({
          el:'#root',
          components:{
              child
          } 
      })
    </script>
</body>

这里写图片描述

发现出现了多个header和footer，要解决这个问题就要用到具名插槽
我们修改代码如下：

<body>
    <div id="root">  
       <child>
           <header slot="header">This is header</header>
           <footer slot="footer">This is footer</footer> 
       </child>
    </div>
    <script>  
      let child = {
          template :
              `<div>  
                     <slot name="header"></slot>
                     <p>Main content</p>
                     <slot name="footer"></slot>
               </div>`
      }
      var vm = new Vue({
          el:'#root',
          components:{
              child
          } 
      })
    </script>
</body>

这里写图片描述
可以看到显示正常了

Qin__

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue中父子组件注意事项，传值，slot应用

这是一篇学习笔记一.父子组件传值&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;父子组件传值&lt;/title&gt; &lt;style&gt; &
复制链接

扫一扫

专栏目录