问题一:
如何把父组件中的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("事件触发了"); } }