Vue父子组件间传值之 props/$emit

阳光穿透心脏的1/2处 2022-12-20 13:59 162阅读 0赞

## 示例一：父组件向子组件传值及方法 ##

*  定义父组件：

<template>
      <div>
        <h2> {
       {msg}}</h2>    <br>
        <v-head :title="titleText" :messgae="msg" :homeFun="homeFun" :homeComp=this></v-head>
      </div>
    </template>
    <script>
      import Head from './Head';
      export default {
        data() {
          return {
            msg: '首页',
            titleText:'来自首页的数据'
          }
        },
        components:{
          'v-head':Head
        },
        methods:{
          homeFun(param){
            console.log("来自父组件的fun方法 "+param);
          }
        }
      }

\- 定义子组件：

<template>
      <div>
        <h2>{
       {msg}}</h2>
        {
       {title}}  {
       {messgae}}    <br>
        <button @click="homeFun">执行父组件的方法</button><br>
        <button @click="homeFun('abcd')">执行父组件的方法</button><br>
        <button @click="getHomeComp()">获取父组件的数据和方法</button><br>
      </div>
    </template>
    <script> export default { data() { return { msg: '头部', } }, methods:{ getHomeComp(){ console.log(this.titleText); console.log(this.homeComp.titleText); this.homeComp.homeFun(); } }, props:['title','messgae','homeFun','homeComp'] } </script>

## 示例二：父组件向子组件传递数据 ##

*  子组件Child.vue

<template>
      <div>
        <h1>子组件</h1>
        <h3>插值表达式获取到：{
       {msg1}}</h3>
        <h3>插值表达式获取到：{
       {msg2}}</h3>
        <h3>插值表达式获取到：{
       {msg3}}</h3>
      </div>
    </template>
    <script> export default { name: 'Child', props: { msg1: { type: String, default: '' }, msg2: { type: String, default: '' }, msg3: { type: String, default: '' } } } </script>

*  父组件：Parent.vue

<template>
      <div>
        <h1>父组件</h1>
        <h-child v-bind:msg1="'来自父组件的数据'" 动态绑定 :msg2="'data from parent'" 动态绑定的简写形式 msg3="'data from parent'" 绑定字符串：注意字符串用单引号括起来 ></h-child>
      </div>
    </template>
    <script> // 引入子组件 import HChild from './Child' export default { name: 'Parent', components: { HChild } } </script>

*  结果：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center]

## 示例：子组件中单击按钮向父组件传递数据 ##

*  子组件：Child.vue

<template>
      <div>
        <h1>子组件</h1>
        <button @click="passMsg">子组件向父组件传值</button>
      </div>
    </template>
    <script> export default { name: 'Child', methods: { passMsg () { this.$emit('showMsgEvent', '子组件向父组件传递的值') } } } </script>

*  父组件：Parent.vue

<template>
      <div>
        <h1>父组件</h1>
        <h3>插值表达式获取到：{
       {msg}}</h3>
        <h-child @showMsgEvent="showMsg"></h-child>  
      </div>
    </template>
    <script> // 引入子组件 import HChild from './Child' export default { name: 'Parent', data () { return { msg: '' } }, components: { HChild }, methods: { showMsg (val) { this.msg = val } } } </script>

结果：  
![在这里插入图片描述][20201120112346113.png_pic_center]

单击按钮后  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/bac836951191485ba2a7689f9f1c2e8f.png
[20201120112346113.png_pic_center]: /images/20221120/db944c21b6d04205b1603bf18dd6bbc1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/cb5f19accfac4899a53da9c6bda1909f.png