vue 父组件与子组件之间如何传值 ---重学vue.js笔记(11)

it2024-10-22  41

一:父组件如何传值给子组件

问题一:

如何把父组件中的msg传递给子组件? 解决方法:

父组件传值给子组件使用的是属性传值方式。子组件中的props选项是用来接收父组件传来的数据。

1.在子组件中使用props选项接收父组件的值。

let son={ template:'#test', props:['msg2'] }

props对应的值可以是数组也可以是对象,这里使用数组的方式定义变量。

2…在子组件中使用v-bind指令作为父子之间变量的传递桥梁。

<son :msg2=msg></son>

:是v-bind的缩写,使用msg2变量接收msg的值。

问题二:

父组件如何传递多个数据

props使用数组的方式进行接收即可,如[‘msg1’,‘msg2’,‘msg3’]

问题三: 如何对父组件传递过来的数据进行类型检查

props可以使用对象的方式可以限制传递过来的数据类型等。

props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true // 必须要传递,否则控制台会显示错误 }, // 带有默认值的数字 propD: { type: Number, default: 100 // 默认值是100 }, // 带有默认值的对象 propE: { type: Object, // 对象或数组默认值必须从一个工厂函数获取 default: function () { return { message: 'hello' } } }, // 自定义验证函数 propF: { validator:function(value){ return value>10 // 符合条件才返回 } }

二:子组件如何传值给父组件

子组件要传值给父组件,需要借助事件绑定方式@进行传递

1.给子组件对应的元素绑定一个事件

<template id="test"> <div> <button @click="handleSend"> click me</button> </div> </template> 使用$emit给父组件发射数据 methods:{ handleSend:function(){ this.$emit('xx',this.sonData) } }

在$emit方法中传入一些参数,第一个参数是用来关联父组件中定义的函数,第二个参数是需要传递的数据。

3.使用@关联父组件中定义的函数

<son @xx='handleClick'></son>

xx是$emit定义的函数名,handleClick是父组件中定义的函数,用来接收数据的。

4.在父组件定义handleClick方法。

methods:{ handleClick:function(){ console.log("事件触发了"); } }
最新回复(0)