首页 > 其他 > 详细

Vue2.x Component之间进行数据传递

时间:2018-04-05 20:38:14      阅读:186      评论:0      收藏:0      [点我收藏+]

假设我们有一个父组件是 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>

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

Vue2.x Component之间进行数据传递

原文:https://www.cnblogs.com/Godfunc/p/8724101.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!