基于VUE+Element UI的子页面和父页面交互示例

1、App.vue

<template>
  <div id="app">
    <h3>{{ msg }}</h3>
    <el-button type="primary" @click="getChiledInfo()">我是父页，点击我将获得子页中的信息</el-button>
    <el-button type="info" @click="getChiledFun()">我是父页，点击我将调用子页中的方法</el-button>
    <p>{{cInfo}}</p>
    <HelloWorld ref="helloWorld" :info='info' @upd='upd'></HelloWorld>
    <p>{{cInfo}}</p>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld'
export default {
  components: { HelloWorld },
  data() {
    return {
      msg: '我是父页！',
      info: '我是父页的信息,我存在data()中',
      cInfo: ''
    }
  },
  methods: {
    getChiledInfo() {
      this.cInfo = this.$refs.helloWorld.cIN
    },
    getChiledFun() {
      this.cInfo = this.$refs.helloWorld.ChiledFun()
    },
    v() {
      alert('我是父页中的方法！')
    },
    upd: (data) => {
      alert('我是父页的方法并接收到了子页的传来的值：' + JSON.stringify(data))
    }
  }
}
</script>

2、helloWorld.vue

<template>
  <div class="hello">
    <h1>{{ '------------------------------------------' }}</h1>
    <h3>{{ msg }}</h3>
    <el-button type="info" @click="upd">我是子页的按钮，点激活将调用父页的方法</el-button>
    <p>{{'从父页获取到的信息:'+info}}</p>
    <h1>{{ '------------------------------------------' }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    info: ''
  },
  data() {
    return {
      msg: '我是子页！',
      cIN: '我是子页的信息,我存在data()中'
    }
  },
  methods: {
    ChiledFun() {
      alert('我是子页中的方法')
    },
    upd() {
      this.$emit('upd', { value: '124' })
    }
  }
}
</script>