美文网首页
vue 子组件向父组件传递数据

vue 子组件向父组件传递数据

作者: 一叶障目5217 | 来源:发表于2019-03-17 15:59 被阅读0次

子组件

Children.vue
<template>
  <div>
    <div @click="iclick">向父页面传递数据 </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      activeName:1
    }
  },
  methods:{
    iclick(){
        this.$emit('ievent',‘我是子组件的数据’);
    }
  }
}
</script>

父组件

index.vue
<template>
  <div class="hello">
    <Children @ievent = "ievent"></Children>
    <h2>{{name}}</h2>
  </div>
</template>
<script>
import Children from '你的路径/Children';
export default {
  components:{
    Children:Children
  },
  data () {
    return {
      name:''
    }
  },
  methods: {
    ievent(...name){
        //name 就是子页面传递过来的数据
        this.name = name;
    }
  },
</script>

更多详细知识介绍请访问我的个人主页

相关文章

  • vue父子组件传递数据方法

    标签(空格分隔): vue 父组件向子组件传递数据 Vue中父组件向子组件传递数据用props 举个例子 父组件中...

  • vue组件间通信

    vue组件间通信 1.父组件向子组件传递数据--props 在vue2.0中使用props实现向子组件传递数据: ...

  • Vue父组件调用子组件事件

    Vue父组件向子组件传递事件/调用事件 不是传递数据(props)哦,适用于 Vue 2.0 方法一:子组件监听父...

  • vue常见面试题

    1.vue优点 2.vue父组件向子组件传递数据? 3.子组件像父组件传递事件 4.v-show和v-...

  • Vue 组件数据传递

    Vue 组件数据传递 父组件->子组件 父组件到子组件的数据通过 props 传递 在父组件注册子组件,传递数据到...

  • 弹窗设置(父子传参原理)

    父组件: 1.父组件向子组件传递数据父组件绑定属性,给子组件传递数据子组件通过props接收父组件传递过来的数据子...

  • Vue组件间数据传递

    前言 总结vue组件间的数据传递 路由传参 父组件传递数据给子组件---props 子组件传递数据给父组件---$...

  • Vue 组件之间传值

    1. 父组件使用props向子组件传递数据 2. 子组件使用$emit向父组件传递数据

  • uniapp 父子组件传值

    一、父组件向子组件传递数据(props) child parent 二、子组件向父组件传递数据(emit) par...

  • vue中父子组件之间通信的方式

    1,父组件给子组件传递数据 vue中使用props向子组件传递数据1): 子组件在props中创建一个属性,用于接...

网友评论

      本文标题:vue 子组件向父组件传递数据

      本文链接:https://www.haomeiwen.com/subject/noyumqtx.html