前端vue中父子组件之间的传值（修改值）和事件的相互调用

在Vue中，子组件不能直接改变父组件的数据，因为Vue是单向数据流的。但是可以通过触发父组件的事件并传递数据来实现子组件改变父组件的数据。父组件可以在模板中监听这个自定义事件，并定义相应的事件处理函数来响应子组件的操作。父组件可以在模板中监听这个自定义事件，并定义一个相应的方法来处理子组件的操作。在父组件模板中使用子组件，并为该组件绑定一个自定义事件，当子组件需要修改数据时，就会触发这个事件。在子

023的小陈

4621人浏览 · 2023-04-16 14:45:24

023的小陈 · 2023-04-16 14:45:24 发布

父组件向子组件传值

子组件中的 data 属性是用来存储子组件自身的数据，而不是用来接收父组件传递的数据的。父组件向子组件传递数据的常用方式是通过 props。

在 Vue.js 中，props 是一个属性，可以用来从父组件传递数据到子组件。子组件可以接受这些数据，并在其模板中使用它们。

//1.声明组件模板对象
    const login = {
        template:'<div><h2>欢迎: {{ name }} 年龄:{{ age }}</h2></div>',
        props:['name','age']
    }
 
//2.注册局部组件
    const app = new Vue({
        el: "#app",
        data: {
            username:"小陈陈",
            age:23
        },
        methods: {},
        components:{
            login //注册组件
        }
    });

//3.使用组件
	 <login :name="username" :age="age"></login>  //使用v-bind形式将数据绑定Vue实例中data属性,日后data属性发生变化,组件内部数据跟着变化

子组件修改父组件中的值：

在Vue中，子组件不能直接改变父组件的数据，因为Vue是单向数据流的。但是可以通过触发父组件的事件并传递数据来实现子组件改变父组件的数据。

方法1

具体步骤如下：

在父组件中定义一个方法，用于修改需要改变的数据。
在父组件模板中使用子组件，并为该组件绑定一个自定义事件，当子组件需要修改数据时，就会触发这个事件。
在子组件中，使用 $emit 方法触发自定义事件，并将需要修改的数据作为参数传递给父组件。
父组件接收到事件后，调用定义好的方法，修改数据。

示例代码如下：

父组件：

<template>
  <div>
    <p>{{ message }}</p>
    <child-component @change-message="changeMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent'

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    }
  },
  methods: {
    changeMessage(newMessage) {
      this.message = newMessage
    }
  }
}
</script>

子组件：

<template>
  <div>
    <button @click="updateMessage">点击我更新父组件的消息</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  methods: {
    updateMessage() {
      this.$emit('change-message', '新的消息')
    }
  }
}
</script>

在子组件中，我们定义了一个 updateMessage 方法，在该方法中调用 $emit 方法触发自定义事件，并将字符串 '新的消息' 作为参数传递给父组件。在父组件中，我们定义了一个 changeMessage 方法，该方法将接收子组件传递过来的参数，并将其赋值给 message 数据，从而改变父组件的数据。

注意，父组件中使用 @change-message="changeMessage" 将自定义事件 change-message 和父组件的 changeMessage 方法绑定起来，这样当子组件触发自定义事件时，就会调用父组件中的方法。

方法2

如果使用 sync 修饰符，可以更简便地实现子组件修改父组件数据的操作。

具体步骤如下：

在父组件中将需要修改的数据作为属性传递给子组件，并使用 :value.sync 的语法，表示这是一个双向绑定的属性。
在子组件中，通过修改该属性的值，就能够直接修改父组件的数据。

示例代码如下：

父组件：

<template>
  <div>
    <p>{{ message }}</p>
    <child-component :message.sync="message"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent'

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    }
  }
}
</script>

子组件：

<template>
  <div>
    <button @click="updateMessage">点击我更新父组件的消息</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: String
  },
  methods: {
    updateMessage() {
      this.$emit('update:message', '新的消息')
    }
  }
}
</script>

在父组件中，我们将 message 属性作为参数传递给子组件并使用 :value.sync 的语法来实现双向绑定。子组件中可以直接修改 message 属性的值，从而实现修改父组件数据的效果。在子组件中，我们使用 $emit 方法触发 update:message 事件，并将 '新的消息' 作为参数传递给父组件。

注意，在子组件中修改属性值时，不能直接使用 this.message = '新的消息' 的语法，而是应该使用 $emit('update:message', '新的消息')，因为这样才能够正确地更新父组件中的数据。在父组件中，我们需要监听 update:message 事件，并将其绑定到一个方法上，用于更新父组件中的数据。

子组件调用父组件里的函数

方法1

在 Vue 中，可以通过 props 属性将父组件中的函数传递给子组件。

首先，在父组件中定义一个函数，例如：

methods: {
  handleClick() {
    // do something
  }
}

然后，在父组件中使用子组件时，将该函数作为 props 属性传递给子组件，例如：

<template>
  <child-component :handleClick="handleClick" />
</template>

最后，在子组件中接收传递过来的函数，并在需要的地方调用它，例如：

props: {
  handleClick: Function
},
methods: {
  someMethod() {
    // call the handleClick function from parent component
    this.handleClick();
  }
}

方法2

在Vue中，可以使用$emit方法向父组件派发一个自定义事件，并传递参数。父组件可以在模板中监听这个自定义事件，并定义相应的事件处理函数来响应子组件的操作。

具体的做法是，在子组件中通过this.$emit(event, [...args])方法触发一个自定义事件，并传递需要的参数。父组件可以在模板中监听这个自定义事件，并定义一个相应的方法来处理子组件的操作。

例如：

<!-- 父组件 -->
<template>
  <div>
    <child-component @child-click="handleClick"></child-component> <!-- 监听子组件的自定义事件 -->
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleClick() {
      console.log('点击了子组件的按钮');
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <button @click="handleButtonClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleButtonClick() {
      this.$emit('child-click'); // 触发自定义事件
    }
  }
};
</script>

在上面的例子中，子组件定义了一个名为handleButtonClick的方法，当按钮被点击时会通过this.$emit('child-click')方法触发一个自定义事件'child-click'。父组件在模板中监听了这个自定义事件，并定义了一个名为handleClick的方法来处理这个事件。当子组件中的按钮被点击时，会触发自定义事件，并调用父组件中的handleClick方法。

父组件调用子组件的函数

在 Vue 中，父组件可以通过 $refs 属性引用子组件，并调用其方法。具体步骤如下：

在子组件中，给需要调用的函数添加一个 ref 属性，例如 myFunction。

在父组件中，通过 $refs 属性获取子组件实例，然后调用子组件的方法。示例代码如下：

<template>
  <div>
    <ChildComponent ref="child"></ChildComponent>
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.child.myFunction();
    }
  }
}
</script>

在上面的示例代码中，父组件首先在模板中使用 <ChildComponent> 标签引入了子组件，并设置了一个 ref 属性为 child。然后，在父组件中定义了一个 callChildMethod 方法，该方法通过 this.$refs.child 获取到子组件实例，然后调用了 myFunction 方法。
注意：只有当子组件已经被挂载到 DOM 中才能使用 $refs。如果尝试在子组件还没有被挂载的时候获取 $refs，则会返回 undefined。

如果觉得组件之间的数据传输过于麻烦复杂的时候，可以学习vuexVuex详解，一文彻底搞懂Vuex_Mr.指尖舞者的博客-CSDN博客

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^