vue组件通信

最新推荐文章于 2023-11-04 20:01:50 发布

小镇青年有big梦想

最新推荐文章于 2023-11-04 20:01:50 发布

阅读量233

点赞数

分类专栏： vue 文章标签： vue组件通信

本文链接：https://blog.csdn.net/szw_18583757301/article/details/78408316

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

父子兄弟之间的获取数据的demo

**父主件获取子主件的方法**
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div id="app">
       <div-aa></div-aa>
   </div>
<template id="id">
     <div style="background:red;height:300px;">
         我是父组件
         <p>{{msg}}</p>
         <p>{{info}}</p>
         <bb  @div-event="accept_data"></bb>  //子组件 @事件名="接受数据的函数名" 调用接受数据的函数
     </div>
</template>
<template id="bb">
    <div style="background:greenyellow;height:100px;">
        我是子组件
        <p>{{info1}}</p>
      </div>
</template>
</body>
</html>
<script src="lib/vue/vue.min.js"></script>
<script>

     new Vue({
        el:'#app',
        components:{   //父组件
              'div-aa':{
                  template:'#id',
                  data:function(){
                      return{
                          msg:'呵呵哒',
                          info:''
                      }
                  },
                  methods:{
                     accept_data:function(data){      //接受数据的函数
                       this.info=data
                    }
                  },
                     components:{   //和data评级  //子组件
                         'bb':{
                             template:'#bb',
                             data:function(){
                                 return{
                                    info1:'我是子组件的----你是傻逼'
                                 }
                             },
                            methods:{
                                fashe:function(){
                                    this.$emit('div-event',this.info1);  //发射函数
                                }
                            },
                            created:function(){   //*created*/        //调用函数
                              this.fashe();
                            }
                         }
                  }
              }
          }
    });
/*
* 父主件获取子组件的方法；
* 1.首先在子组件的methods写上一个发射函数；
* fashen:function(){
*   this.$emit('事件名'，this.info)
* },
* created:function(){    //网页加载就调用函数
* this.fashen();
*
* }
* 2.
*
*
* */

</script>
------------------------------------------------------

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div-aa></div-aa>
    </div>
    <template id="id">
        <div style="background:red;height:300px;">
            我是父组件
            <p>{{msg}}</p>
            <bb :out-data="msg"></bb>
            <!--将父主件的msg的信息存储在out-data这个属性里面-->
        </div>
    </template>
    <template id="bb">
        <div style="background:greenyellow;height:100px;">
            我是子组件
            <p>{{info}}</p>
            <p>{{outData}}</p>
            <!-- props:['outData'] 里面的值-->
        </div>
    </template>
</body>

</html>
<script src="lib/vue/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        components: {   //父组件
            'div-aa': {
                template: '#id',
                data: function () {
                    return {
                        msg: '呵呵哒'
                    }
                },
                components: {    //和data评级  //子组件
                    'bb': {
                        template: '#bb',
                        data: function () {
                            return {
                                info: '你是傻逼'
                            }
                        },
                        props: ['outData']   //  和data平级 获取msg的属性值，在html5里面的data属性  驼峰命名法
                    }
                }
            }
        }
    })
    /*
     * **子组件获取父组件的方法：**
     * props
     *
     *
     * */

</script>

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div-aa></div-aa>
        <bb></bb>
    </div>
    <template id="id">
        <div style="background:red;height:300px;">
            <p>{{msg}}</p>
            <p>{{info}}</p>
        </div>
    </template>
    <template id="bb">
        <div style="background:greenyellow;height:100px;">
            <p>{{info1}}</p>
        </div>
    </template>
</body>

</html>
<script src="lib/vue/vue.min.js"></script>
<script>
    var et = new Vue(); //兄弟和兄弟的获取数据;因为每个组件都是vue的实例；因为this指向不明
    new Vue({
        el: '#app',
        components: {
            'div-aa': {
                template: '#id',
                data: function () {
                    return {
                        msg: '我是大哥组件',
                        info: ''
                    }
                },
                methods: {
                    accept_data: function () {
                        et.$on('div-event', function (data) {      /*接收数据*/
                            console.log(data);
                            this.info = data;                 /*先是定义（接收数据）就用created*/
                        }.bind(this));                      /*on   created*/
                    }       /*bind的作用就是函数外面的对象引入函数内部，就把外面父组件这个对象引入到里面去了*/                                /*emit  mounted 发射*/

                },
                created: function () {
                    this.accept_data();
                    console.log(2222)
                }

            },
            'bb': {
                template: '#bb',
                data: function () {
                    return {
                        info1: '我是二弟组件'
                    }
                },
                methods: {
                    fashe: function () {             /*发射数据  mounted 调用函数 */
                        et.$emit('div-event', this.info1)
                    }
                },
                mounted: function () {
                    this.fashe();
                    console.log(1111)
                }
            }
        }
    });

/*
* 兄弟获取兄弟
*
*
*
* */

</script>

小镇青年有big梦想

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件通信

**父主件获取子主件的方法**<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <div-aa></di
复制链接

扫一扫