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>
    
  • 相关阅读:
    用于对象JSON.parse()和JSON.stringify()
    注册地址从零开始学建站域名篇
    类数据成员点类派生出圆类
    事件原因Stack Overflow at line:0 IE下解决方案
    连接参数SqlServer跨服务器查询
    进程子进程linux系统编程之进程(二):fork函数详细分析
    插件在线BookBlock:一个实现翻页效果的jQuery插件
    区域实现Android实现图片的裁剪(不调用系统功能)
    方法数据库android轻量型数据库sqlite的使用方法汇总
    编译用户Orcle的package中访问其它Schema的表
  • 原文地址:https://www.cnblogs.com/Godfunc/p/8724101.html
Copyright © 2011-2022 走看看