首页 > web前端 > js教程 > vue父子组件传值及slot应用步骤详解

vue父子组件传值及slot应用步骤详解

php中世界最好的语言
发布: 2018-05-22 14:54:59
原创
5206 人浏览过

这次给大家带来vue父子组件传值及slot应用步骤详解,vue父子组件传值及slot应用的注意事项有哪些,下面就是实战案例,一起来看一下。

一.父子组件传值

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>父子组件传值</title>

  <style> 

  </style>

  <script src="./vue.js"></script>

</head>

<body>

  <p id="root"

    <counter :count="0" @numberchange="handleChange"></counter>

    <counter :count="0" @numberchange="handleChange"></counter>

    <p>{{total}}</p> 

    <validate-content content="hello world"></validate-content>

  </p>

  <script> 

   //父组件向子组件传值用 props ,加:号后传递的为js表达式,示例中则为数字,不加:号代表的是字符串 

   var counter = { //局部注册 

     props:['count'],

     data:function(){//在子组件中定义数据,data不能是对象,必须是一个函数。

       return {

         number:this.count

       }

     },

     template:'<p @click="handleClick2">{{number}}</p>',

     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}}</p>',

   }

   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

先看一个示例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<body>

  <p id="root"

    <child><p>Qin</p></child>

  </p>

  <script> 

   let child = {

     template :`<p>

           <p>hello world</p> 

        </p>`

   }

   var vm = new Vue({

     el:'#root',

     components:{

       child

     

   })

  </script>

</body>

登录后复制

打开查看器查看一下

这里写图片描述

发现Qin不见了

<p>Qin</p>1

查看官方文档 ,   https://cn.vuejs.org/v2/guide/components-slots.html 

我们得出结论:如果 child 没有包含一个 < slot > 元素,则任何传入它的内容都会被抛弃

 我们加入插槽

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<body>

  <p id="root"

    <child><p>Qin</p></child>

  </p>

  <script> 

   let child = {

     template :`<p>

           <p>hello world</p>

           <slot></slot>

        </p>` 

   }

   var vm = new Vue({

     el:'#root',

     components:{

       child

     

   })

  </script>

</body>

登录后复制

发现Qin能正常显示,且slot将会被替换为解析后的片段 < p > Qin < /p >

这里写图片描述

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<body>

  <p id="root"

    <child></child>

  </p>

  <script> 

   let child = {

     template :`<p>

           <p>hello world</p>

           <slot>default value</slot>

        </p>`

   }

   var vm = new Vue({

     el:'#root',

     components:{

       child

     

   })

  </script>

</body>

登录后复制

效果图

效果图

具名插槽

 如果想使用多个插槽,我们先看看效果:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<body>

  <p id="root"

    <child>

      <header>This is header</header>

      <footer>This is footer</footer> 

    </child>

  </p>

  <script> 

   let child = {

     template :

       `<p> 

           <slot></slot>

           <p>Main content</p>

           <slot></slot>

        </p>`

   }

   var vm = new Vue({

     el:'#root',

     components:{

       child

     

   })

  </script>

</body>

登录后复制

这里写图片描述

发现出现了多个header和footer,要解决这个问题就要用到具名插槽  

我们修改代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<body>

  <p id="root"

    <child>

      <header slot="header">This is header</header>

      <footer slot="footer">This is footer</footer> 

    </child>

  </p>

  <script> 

   let child = {

     template :

       `<p> 

           <slot name="header"></slot>

           <p>Main content</p>

           <slot name="footer"></slot>

        </p>`

   }

   var vm = new Vue({

     el:'#root',

     components:{

       child

     

   })

  </script>

</body>

登录后复制

这里写图片描述 

可以看到显示正常了

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

JavaScript DOM元素增删改步骤详解

VeeValidate在vue项目里表单校验使用案例代码分析

以上是vue父子组件传值及slot应用步骤详解的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板