Vue组件间传递参数

父子间传递参数

通过props属性来传递

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>父-子</title>
    <script type="text/javascript" src='js/vue.js'></script>
    <script>
    window.onload = function(){
        new Vue({
            el:'#my',
            data:{ 
              obj:{name:'老张',age:50}
            },
            components:{  // 局部组件
              'my-parent':{  //组件的名称
                template:'#my-parent',
                data(){
                  return {
                    obj:{name:'小张',age:20}
                  }
                },
                props:['data'],
                components:{
                  'my-child':{
                    template:'#my-child',
                    data(){
                      return {
                        
                      }
                    },
                    props:['data']
                  }
                }
              }
            }
        })
    }
    </script>
    <template id="my-parent">
        <div>
          <h1>我是父组件</h1>
          <p>姓名：{{data.name}}</p>
          <p>年龄：{{data.age}}</p>
          <my-child :data="obj"></my-child>
        </div>
    </template>
    <template id="my-child">
      <div>
        <h1>我是子组件</h1>
        <p>姓名：{{data.name}}</p>
        <p>年龄：{{data.age}}</p>
      </div>
  </template>
</head> 
<body>
  <div id="my">
     <my-parent :data="obj"></my-parent>
  </div>
</body>
</html>

 子组件传递参数到父组件

vm.$emit( event, arg ) //触发当前实例上的事件

vm.$on( event, fn );//监听event事件后运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>子-父</title>
    <script type="text/javascript" src='js/vue.js'></script>
    <script>
    window.onload = function(){
        new Vue({
            el:'#my',
            data:{ 
              obj:{name:'老张',age:50}
            },
            components:{  // 局部组件
              'my-parent':{  //组件的名称
                template:'#my-parent',
                data(){
                  return {
                    obj:{name:'小张',age:20},
                    childHobby:''
                  }
                },
                methods:{
                  get:function(childData){    //子发送消息的触发方法
                    this.childHobby = childData;   //把子的值赋给另一个变量
                  }
                },
                props:['data'],
                components:{
                  'my-child':{
                    template:'#my-child',
                    data(){
                      return {
                        hobby:'打篮球'
                      }
                    },
                    props:['data'],
                    methods:{
                      send:function(){
                        this.$emit('abc',this.hobby)     //$emit('发射名称',参数)  
                      }
                    }
                  }
                }
              }
            }
        })
    }
    </script>
    <template id="my-parent">
        <div>
          <h1>我是父组件</h1>
          <p>姓名：{{data.name}}</p>
          <p>年龄：{{data.age}}</p>
          <p>儿子的爱好：{{childHobby}}</p>
          <my-child :data="obj" v-on:abc="get"></my-child>
        </div>
    </template>
    <template id="my-child">
      <div>
        <h1>我是子组件</h1>
        <p>姓名：{{data.name}}</p>
        <p>年龄：{{data.age}}</p>
        我的爱好：<input type="text" v-model="hobby" @input="send()"/>
        <button @click="send()">子传父</button>
      </div>
  </template>
</head> 
<body>
  <div id="my">
     <my-parent :data="obj"></my-parent>
  </div>
</body>
</html>

 兄弟间传递参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>兄弟</title>
    <script type="text/javascript" src='js/vue.js'></script>
    <script>
    window.onload = function(){
        new Vue({
            el:'#my',
            data:{ 
              obj:{name:'老张',age:50},
              childHobby:''
            },
            methods:{
              get:function(childData){   //获取小明的值 
                this.childHobby = childData;   //获取的值传给childHobby
              }
            },
            components:{  // 局部组件
              'my-brother-a':{  //组件的名称
                template:'#my-brother-a',
                data(){
                  return {
                    obj:{name:'大明',age:20}
                  }
                },
                props:['hobby']
              },
              'my-brother-b':{  //组件的名称
                template:'#my-brother-b',
                data(){
                  return {
                    obj:{name:'小明',age:18,hobby:'打游戏'}
                  }
                },
                methods:{
                  send:function(){
                    this.$emit('pass',this.obj.hobby)   //传给父
                  }
                }
              }
            }
        })
    }
    </script>
    <template id="my-brother-a">
        <div>
          <h1>我是大哥</h1>
          <p>姓名：{{obj.name}}</p>
          <p>年龄：{{obj.age}}</p>
          <p>小明的爱好：{{hobby}}</p>
        </div>
    </template>
    <template id="my-brother-b">
      <div>
        <h1>我是弟弟</h1>
        <p>姓名：{{obj.name}}</p>
        <p>年龄：{{obj.age}}</p>
        我的爱好：<input type="text" v-model="obj.hobby" @input="send()"/>
        <button @click="send()">子传父</button>
      </div>
  </template>
</head> 
<body>
  <div id="my">
    {{childHobby}}
     <my-brother-a :hobby="childHobby"></my-brother-a>
     <my-brother-b v-on:pass="get"></my-brother-b>
  </div>
</body>
</html>

 方式B

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>兄弟</title>
    <script type="text/javascript" src='js/vue.js'></script>
    <script>
    window.onload = function(){
        var vm = new Vue();  //定义一个空的对象    相当于第三方
        var a = {  //组件的名称
                template:'#my-a',
                data(){
                  return {
                    name:'A组件'
                  }
                },
                methods:{
                  send:function(){
                    vm.$emit('data-a',this.name);//发射
                  }
                }
              };
        var b = {  //组件的名称
          template:'#my-b',
          data(){
            return {
              nameA:''
            }
          },
          mounted:function(){   //生命周期
            vm.$on('data-a',item =>{   //接收 data-a接收名称 item参数
              this.nameA = item;
            })
          }
        };
        new Vue({
            el:'#my',
            data:{ 
              obj:{name:'老张',age:50}
            },
            components:{  // 局部组件
              'my-a':a,
              'my-b':b
            }
        })
    }
    </script>
    <template id="my-a">
        <div>
          <h1>我是A组件</h1>
          <button @click="send()">发送到B</button>
        </div>
    </template>
    <template id="my-b">
      <div>
        <p>B组件</p>
        <h1>{{nameA}}</h1>
      </div>
  </template>
</head> 
<body>
  <div id="my">
     <my-a></my-a>
     <my-b></my-b>
  </div>
</body>
</html>

 

posted @ 2020-03-04 10:19  bradleydan  阅读(234)  评论(0)    收藏  举报