父组件:
- <template>
- <div id="app">
- <child-a ref="child"></child-a>
- <!-- 用 ref 给子组件起个名字 -->
- <button @click="getMyEvent"> 点击父组件 </button>
- </div>
- </template>
- <script>
- import ChildA from './components/child.vue'
- export default {
- components: {
- ChildA
- },
- data() {
- return {
- msg: "我是父组件中的数据"
- }
- },
- methods: {
- getMyEvent(){
- this.$refs.child.emitEvent(this.msg);
- // 调用子组件的方法, child 是上边 ref 起的名字, emitEvent 是子组件的方法.
- }
- }
- }
- </script>
子组件:
- <template>
- <button>
- 点击我
- </button>
- </template>
- <script>
- export
- default {
- methods:
- {
- emitEvent(msg) {
- console.log('接收的数据 --------->' + msg) // 接收的数据 ---------> 我是父组件中的数据
- }
- }
- }
- </script>
- ----------------
来源: http://www.bubuko.com/infodetail-3273467.html