vue组件之间通信方式汇总(5种)

当前位置:

首页 > temp > JavaScript教程 >

vue组件之间通信方式汇总(5种)

方法一：使用props\$emit进行父子组件间传值

<body>
    <div id="app">
       <child-a :first-name="firstName" @bind-event="update"></child-a>    
    </div>
    <template id="childA">
         <div>firstName:{{firstName}}</div>
    </template>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
   // 子组件
   const ChildA = {
      template:'#childA',
       props:['first-name'],
       mounted() {
           console.log(this.firstName); // 子组件接收到父组件传过来的firstName值
           this.$emit('bind-event','张');
       }
   }
   // 父组件 
   const app = new Vue({
       el:'#app',
       data:{
           firstName:'zhang'
       },
       methods:{
        update(res){
            this.firstName = res; // 父组件接收到子组件传过来的值
            console.log(this.firstName);
        },
       },
       components:{
           ChildA
       }
   })
</script>

父组件传值到子组件：在子组件上添加动态属性，并在子组件内部添加props，这样子组件内部具有了这个属性。

子组件传值到父组件：在子组件上绑定自定义事件，当该事件触发的时候调用update方法，在子组件内部使用$emit进行事件触发，第二个参数为要传递的值，这样父组件进入update方法，属性值成功更改。

方法二：使用$on\$emit进行所有组件间传值

app.$on('事件名'，callback(res)); // 监听自定义事件

app.$emit('事件名'，[...args]); // 触发自定义事件

<body>
  <div id="app">
       <child-a></child-a>    
       <child-b></child-b>  
       <child-c></child-c>  
  </div>
  <template id="childA">
       <div></div>
  </template>
  <template id="childB">
       <div></div>
  </template>
  <template id="childC">
       <div></div>
  </template>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 const bus = new Vue(); // 定义一个空vue,作为一个总线传递数据
 // 子组件A
 const ChildA = {
     template:'#childA',
     data(){
       return{
         name:'A',
         age:30
       }
     },
     mounted() {
        bus.$on('data-b',res=>{
           console.log(`${this.name}收到二弟的信息：${res}`);
        })
     }
 };
 // 子组件B
 const ChildB = {
     template:'#childB',
     data(){
       return{
         name:'B',
         age:20
        }
     },
     mounted() {
       setTimeout(()=>{
          bus.$emit('data-b','我是B，马上到家！'); // 触发消息
       })
     }
 };
 // 子组件C
 const ChildC = {
     template:'#childC',
     data(){
       return{
         name:'C',
         age:10
        }
     },
     mounted() {
         bus.$on('data-b',res=>{
           console.log(`${this.name}收到二哥的信息：${res}`);
         })
     }
 };
 // 父组件 
 const app = new Vue({
     el:'#app',
     data:{
        name:'父亲'
     },
     mounted() {
         bus.$on('data-b',res=>{
           console.log(`${this.name}收到二儿子的信息：${res}`);
         })
     },
     components:{
         ChildA,
         ChildB,
         ChildC
     }
 })
</script>
依次打印：
A收到二弟的信息：我是B，马上到家！
C收到二哥的信息：我是B，马上到家！
父亲收到二儿子的信息：我是B，马上到家！