vue组件通讯方法汇总（在不使用vuex的情况下）

前三种是父子组件通讯，最后一种是平级组件。

🍓

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>666</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <script src="./Js/vue.js"></script>
</head>
<body>

<div id="app">

  <parent></parent>

</div>
<style>
  .parent{
    border: 2px solid green;
  }
</style>
<template id="parent">
  <div class="parent">
    <div>我是父组件的内容</div>
    <child :m="msg"></child>
  </div>
</template>

<style>
  .child{
    border: 2px solid red;
  }
</style>
<template id="child">
  <div class="child">我是子组件的内容,我收到：{{m}}</div>
</template>

<script>

  let child={
    template:'#child',
    data(){
      return {

      }
    },
    props:['m']
  };

  //定义组件
  let parent={
    template:'#parent',
    data(){
      return {
        msg:'父数据'
      }
    },
    components:{
      child
    }
  };



  new Vue({//根组件
    el:'#app',
    components:{
      parent
    }
  });

</script>

</body>
</html>

🍓

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>666</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <script src="./Js/vue.js"></script>
</head>
<body>

<div id="app">

  <parent></parent>

</div>
<style>
  .parent{
    border: 2px solid green;
  }
</style>
<template id="parent">
  <div class="parent">
    <div>我是父组件的内容,我收到{{msgChild}}</div>
    <child @to-parent="getChildData"></child>
  </div>
</template>

<style>
  .child{
    border: 2px solid red;
  }
</style>
<template id="child">
  <div class="child">我是子组件的内容,我收到：</div>
</template>

<script>

  let child={
    template:'#child',
    data(){
      return {
        msg:'子数据'
      }
    },
    mounted(){//这里可以随意，用按钮...
//      this.$emit('自定义事件名',要传递的数据);
      this.$emit('to-parent',this.msg);
    }
  };

  //定义组件
  let parent={
    template:'#parent',
    data(){
      return {
        msg:'父数据',
        msgChild:'bmw'
      }
    },
    methods:{
      getChildData(childData){
//        alert(childData);
        this.msgChild=childData;
      }
    },
    components:{
      child
    }
  };



  new Vue({//根组件
    el:'#app',
    components:{
      parent
    }
  });

</script>

</body>
</html>

🍓

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>666</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <script src="./Js/vue.js"></script>
</head>
<body>

<div id="app">

  <parent></parent>

</div>
<style>
  .parent{
    border: 2px solid green;
  }
</style>
<template id="parent">
  <div class="parent">
    <div>我是父组件的内容,我收到{{childMsg}}</div>
    <child ref="child"></child>
  </div>
</template>

<style>
  .child{
    border: 2px solid red;
  }
</style>
<template id="child">
  <div class="child">我是子组件的内容,我收到:{{parentMsg}}</div>
</template>

<script>

  let child={
    template:'#child',
    data(){
      return {
        msg:'子数据',
        parentMsg:''
      }
    },
    methods:{
      show(){
        alert('我是子方法');
      }
    },
    mounted(){
//      this.$parent.数据名/方法名();
      this.parentMsg = this.$parent.msg;
      this.$parent.show();
    }
  };

  //定义组件
  let parent={
    template:'#parent',
    data(){
      return {
        msg:'父数据',
        childMsg:''
      }
    },
    mounted(){
//      this.$refs.child.数据名
//      this.$refs.child.方法名
      this.childMsg = this.$refs.child.msg;
      this.$refs.child.show();
    },
    methods:{
      show(){
        alert('我是父方法');
      }
    },
    components:{
      child
    }
  };



  new Vue({//根组件
    el:'#app',
    components:{
      parent
    }
  });

</script>

</body>
</html>

🍓

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>666</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <script src="./Js/vue.js"></script>
</head>
<body>

<div id="app">

  <aa></aa>
  <bb></bb>
  <cc></cc>

</div>


<script>

  let Event = new Vue();


  let aa={
    template:'<div @click="send">我是aa组件</div>',
    data(){
      return {
        msg:'aa组件数据'
      }
    },
    methods:{
      send(){
        Event.$emit('to-cc',this.msg)
      }
    }
  };
  
  let bb={
    template:'<div @click="send">我是bb组件</div>',
    data(){
      return {
        msg:'bb组件数据'
      }
    },
    methods:{
      send(){
        Event.$emit('to-cc-too',this.msg)
      }
    }
  };
  
  let cc={
    template:'<div>我是cc组件，我收到:{{msg}}/{{msg2}}</div>',
    data(){
      return {
        msg:'...',
        msg2:'...'
      }
    },
    mounted(){
      Event.$on('to-cc',(aaData)=>{
        alert('aa触发的'+aaData);
        this.msg=aaData;
      });
      Event.$on('to-cc-too',(bbData)=>{
        alert('bb触发的'+bbData);
        this.msg2=bbData;
      });
    }
  };


  new Vue({//根组件
    el:'#app',
    components:{
      aa,bb,cc
    }
  });

</script>

</body>
</html>

🍊🍊🍊🍊🍊🍊🍊🍊🍊🍊我🍊🍊是🍊🍊分🍊🍊割🍊🍊线🍊🍊🍊🍊🍊🍊🍊🍊🍊🍊

还有一种是将数据放在根实例上，然后在子组件通过this.$root.数据名/方法名去访问，但当需要共享的数据比较多的时候会显得比较杂乱，还是用vuex吧。

还有一种就是依赖注入（父组件to子组件），详见官方文档https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85%A5

posted @ 2018-12-20 18:21 LLLLily 阅读(332) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

LLLLily

vue组件通讯方法汇总（在不使用vuex的情况下）

公告