zoukankan      html  css  js  c++  java
  • Vue2.x Component之间进行数据传递 与 事件监听

    假设我们有一个父组件是 App.vue,子组件是Header.vue

    父组件->子组件

    在App.vue中,主要通过在app-header上绑定属性

    <template>
      <div id="app">
        <app-header v-bind:title="title"></app-header>
      </div>
    </template>
    <script>
    import Header from './components/Header'
    export default {
      name: 'App',
      data(){
        return {
          title: 'this is my first vue'
        }
      },
      //局部注册组件
      components: {
        "app-header": Header
      }
    }
    </script>
    

    在Header.vue中,通过props获取对应的属性

    export default {
      name: 'Header',
      props: {
          title: {
            type: string,
            required:true
          }
      },
      data () {
        return {
        }
      }
    }
    </script>
    

    子组件->父组件

    子组件使用$emit,第一个参数是事件,第二个是值

    <template>
        <div id="header">
            <h1 v-on:click='changeTitle'>{{title}}</h1>
        </div>
    </template>
    
    <script>
    export default {
      name: 'Header',
      data () {
        return {
          title: 'Godfunc'
        }
      },
      methods: {
          changeTitle:function(){
              this.title = 'i am changed';
              this.$emit('titleChanged',this.title);
          }
      }
    }
    </script>
    

    父组件触发事件方法,接收参数

    <template>
      <div id="app">
        <app-header  v-on:titleChanged="updateTitle($event)"></app-header>
      </div>
    </template>
    
    <script>
    import Header from './components/Header'
    export default {
      name: 'App',
      data(){
        return {
        }
      },
      methods: {
        updateTitle: function(title){
            this.title = title;
            alert(title);
        }
      },
      //局部注册组件
      components: {
        "app-header": Header,   
      }
    }
    </script>
    

    总结:父组件向子组件传递数据,是通过子组件的属性传递的;子组件向父组件传递数据时,是通过触发事件。

    自定义事件进行组件间通信

    父组件中

    <template>
      <div>
        <app-header ref="head"></app-header>
      </div>
    </template>
    
    <script>
    import appHeader from './components/AppHeader.vue'
    export default {
      data () {
        return {
    
        }
      },
      mounted () {
        this.$refs.head.$on('appEvent', this.addSomething)
      },
      methods: {
        addSomething: function (event) {
          alert(event)
        }
      },
      components: {
        'app-header': appHeader
      }
    }
    </script>
    
    

    子组件中

    <template>
        <div>
            <button @click="click">添加</button>
        </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
        }
      },
      methods: {
        click: function () {
          this.$emit('appEvent', 'test title')
        }
      }
    }
    </script>
    

    兄弟组件之间通信与之类似

    首先需要定义一个公用的 js文件

    import Vue from 'Vue'
    
    export default new Vue()
    

    组件一

    <template>
        <div>
            <button @click="click">comp1</button>
        </div>
    </template>
    
    <script>
    import bus from './bus.js'
    export default {
      methods: {
        click: function () {
          console.log(bus)
          bus.$emit('comp1Event', 'this is a msg')
        }
      }
    }
    </script>
    

    组件二

    <template>
        <div>
        </div>
    </template>
    
    <script>
    import bus from './bus.js'
    export default {
      mounted () {
        console.log(bus)
        bus.$on('comp1Event', function (params) {
          alert(params)
        })
      }
    }
    </script>
    
  • 相关阅读:
    mojo 接口示例
    MojoliciousLite: 实时的web框架 概述
    接口返回json
    centos 6.7 perl 版本 This is perl 5, version 22 安装DBI DBD
    centos 6.7 perl 5.22 安装DBD 需要使用老的perl版本
    商业智能改变汽车行业
    商业智能改变汽车行业
    读MBA经历回顾(上)目的决定手段——北漂18年(48)
    perl 升级到5.20版本
    Group Commit of Binary Log
  • 原文地址:https://www.cnblogs.com/Godfunc/p/8724101.html
Copyright © 2011-2022 走看看