VUE父子组件的通信

最新推荐文章于 2024-09-29 16:42:27 发布

lql_h

最新推荐文章于 2024-09-29 16:42:27 发布

阅读量135

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/lql_h/article/details/102504754

版权

VUE 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

概述

- 父传子

- 父用子的时候通过属性传递

- 子要声明props:['属性名'] 来接收

- 收到就是自己的了，随便你用

- 在template中直接用

- 在js中 this.属性名用

- 子传父

- 子组件里通过$emit('自定义事件名',变量1，变量2)触发

- 父组件@自定义事件名=‘事件名’监听

- ```

子组件方法里 this.$emit('sendfather',val1,val2)触发自定义事件

父组件里 <child @sendfather='mymethods'></child>

```

代码


<!DOCTYPE html>

<html>

<head>

    <title>父子组件的通信（父->子）</title>

</head>

<body>

    <div id="app">

      

    </div>



    <script type="text/javascript" src="vue.js"></script>

    <script type="text/javascript">

       //子组件定义好了props直接用

       var Child={

           template:`

              <div>

              我是子组件{{sendchild}}

              </div>

           `,

           props:['sendchild']

       }

       //父组件通过属性sendchild传递了数据给子组件

       var Parent={

           template:`

              <div>

              我是父组件

              <child sendchild='父亲给你的'></child>



              </div>

           `,

           components:{

              Child

           },

           data(){

              return {

               }

           },

           methods:{

              reserve(val){

                     this.msg=val

              }

           }

       }

      

       new Vue({

           el:'#app',

           components:{

              Parent

           },

           template:`

              <div>

              <parent></parent>

              </div>

           `,

           data(){

              return {



              }

           },

       })

    </script>

</body>

</html>

运行效果

我是父组件

我是子组件父亲给你的

代码2


<!DOCTYPE html>

<html>

<head>

    <title>父子组件的通信</title>

</head>

<body>

    <div id="app">

      

    </div>



    <script type="text/javascript" src="vue.js"></script>

    <script type="text/javascript">

       //子组件定义好了props直接用

       var Child={

           template:`

              <div>

              我是子组件{{sendchild}}

              <button @click='sendparent'>我要反馈东西给父亲</button>

              </div>

           `,

           props:['sendchild'],

           methods:{

              sendparent(){

                  this.$emit('baba','这是儿子组件给你的')

              }

           }



       }

       //父组件通过属性sendchild传递了数据给子组件

       var Parent={

           template:`

              <div>

              我是父组件{{ msg }}

              <child sendchild='父亲给你的' @baba='reserve'></child>



              </div>

           `,

           components:{

              Child

           },

           data(){

              return {

                  msg:''

              }

           },

           methods:{

              reserve(val){

                     this.msg=val

              }

           }

       }

      

       new Vue({

           el:'#app',

           components:{

              Parent

           },

           template:`

              <div>

              <parent></parent>

              </div>

           `,

           data(){

              return {



              }

           },

       })

    </script>

</body>

</html>