vue父子组件通讯的办法

最新推荐文章于 2023-08-13 17:25:04 发布

#%^*$&

最新推荐文章于 2023-08-13 17:25:04 发布

阅读量113

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/fyj___/article/details/108690448

版权

本文详细介绍了Vue中父子组件之间的通讯方式，包括使用props从父组件向子组件传递参数，通过子组件的VM实例调用子组件方法，以及通过$emit从子组件向父组件发送事件。文中提供了多个实际案例进行演示。

摘要由CSDN通过智能技术生成

父组件向子组件通讯

第一种：子组件使用props属性接收父组件传递的参

父组件

首先父组件引进子组件
然后在子组件里调用v-bind:(也可以简写为 : )后面接参数名（可以随意定义），双引号里面写父组件里需要传递的参数值（一般为父组件data里面定义的参数，当然也可以自己写死（例如传递一句话 “hello world”））

<template>
  <div>
    <h1>parent</h1>
    <div style="width: 300px;height: 300px;border: 1px solid red">
      <Child :msg="message"></Child>
    </div>
  </div>
</template>

<script>
import Child from './Child'

export default {
  name: 'Parent',
  components: {
    Child
  },
  data () {
    return {
      message: 'hello'
    }
  }
}
</script>

<style scoped>

</style>

子组件

子组件引用props接收父组件通过v-bind:传递的参数，注意在本次传递中我使用的 msg作为传递的参数所以在子组件的props下有个msg来接收父组件的msg（必须同名） msg内部有type属性存放的是传递参数的类型（String…Number…）
最后接收的参数可以直接使用插值表达式来引用

<div>
  <h1>child</h1>
  <h3>{{msg}}</h3>
</div>
</template>

<script>
export default {
  name: 'Child',
  props: {
    msg: {
      type: String
    }
  }
}
</script>

<style scoped>

</style>

父组件获取子组件的VM实例调用子组件方法传参

父组件

首先还是引入子组件注意子组件有ref属性引号里面是属性名
其次在父组件里创建一个点击按钮，绑定一个方法（btnHandler 方法名随意保持一致就行）
重点 this. $r e f s . c h i l d R e f . t e s t (^{'} h e l l o^{'}) ： b t n H a n d l e r 方法下使用 t h i s .$ refs.childRef来获取子组件的VM实例，该实例可以直接调用子组件的方法（例如子组件的text方法）在text方法里传入参数子组件就得到该参数

<template>
<div>
  <h1>Parent2</h1>
  <input type="button" value="通信子组件" @click="btnHandler">
  <Child2 ref="childRef"></Child2>
</div>
</template>

<script>
import Child2 from '@/components/test2/Child2'
export default {
  name: 'Parent2',
  components: {
    Child2
  },
  methods: {
    btnHandler () {
      // 直接访问子组件： 获取子组件的VM实例
      this.$refs.childRef.test('hello')
    }
  }
}
</script>

<style scoped>

</style>

子组件

子组件有text方法供父组件获取子组件的VM实例来使用该方法传递的参数就可以直接使用

<div>
  <h2>Child2</h2>
</div>
</template>

<script>
export default {
  name: 'Child2',
  methods: {
    test (data) {
      alert('Child: ' + data)
    }
  }
}
</script>

<style scoped>

</style>

俩种方法的混合案例

父组件的输入框内容与msg绑定，并通过v-bind:传递给子组件props接收，
父组件的点击事件可以调用子组件的text方法，将在父组件输入的内容与提示信息的方法显示出来

父组件

<template>
    <div>
      <h1>Parent</h1>
      <input type="text" v-model="msg">
      <input type="button" value="点击" @click="xxx">
      <div style="height: 300px;width: 300px;border: 1px solid red">
        <Child :message="msg" ref="sss"></Child>
      </div>
    </div>
</template>

<script>
import Child from './Child'
export default {
  name: 'Parent',
  components: {
    Child
  },
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    xxx () {
      this.$refs.sss.text(this.msg)
    }
  }
}
</script>

<style scoped>

</style>

子组件

<template>
    <div>
      <h1>Child</h1>
      {{message}}
    </div>
</template>

<script>
export default {
  name: 'Child',
  methods: {
    text (xxx) {
      alert(xxx)
    }
  },
  props: {
    message: {
      type: String
    }
  }
}
</script>

<style scoped>

</style>

子组件向父组件通讯

父组件自定义一个事件，在子组件里通过一个方法，方法里有 this.$emit(‘父组件的事件名’, 传递的参数)来向父组件传递参数

父组件

父组件在引入的子组件里自定义一个事件（这里使用@getMessage=“”）
引号里是父组件的方法，方法里面的参数就是子组件传递过来的参数，可以直接使用

<template>
<div>
  <h1>Parent</h1>
  <Child4 @getMessage="messageHandler"></Child4>
</div>
</template>

<script>
import Child4 from '@/components/test4/Child4'
export default {
  name: 'Parent4',
  components: { Child4 },
  methods: {
    messageHandler (message) {
      alert('事件被触发了,收到参数' + message)
    }
  }
}
</script>

<style scoped>

</style>

子组件

子组件定义一个点击事件，点击后进行了btnHandler方法
该方法的this.$emit(’’,’’),就是向父组件传递参数的唯一方法
前面一个参数是父组件自定义事件的事件名，后面一个参数就是你想要传递的参数

<template>
<div>
  <h2>Child</h2>
  <input type="button" value="向父组件通信" @click="btnHandler">
</div>
</template>

<script>
export default {
  name: 'Child4',
  data () {
    return {
      message: 'hello'
    }
  },
  methods: {
    btnHandler () {
      // 可以触发父组件中预先定义好的关联事件
      this.$emit('getMessage', this.message)
    }
  }
}
</script>

<style scoped>

</style>