父向子
1. 父组件向子组件传参 props
// 父组件
// ---- 向子组件传参,参数名propss
<list :propss="propss"></list>
<!-- 子组件通过属性名接收父组件的传参
// 子组件 -->
<script>
export default {
props: ['propss'] // 属性名的方式接收父组件传参
}
</script>
<!-- 在子组件中使用从父组件接收过来的传参 -->
<span >{{props.name}}</span>
// 父组件向子组件传Function类型的参数
父组件向子组件传Function类型的参数相关代码
methods: {
addComment (comment) {
// unshift向数组的开始位置插入元素
this.comments.unshift(comment)
}
}
<!--父组件向子组件传Function类型的参数-->
<add :addComment="addComment"></add>
// 子组件接收父组件的Function类型传参并使用
<script>
export default {
// 通过属性名或者属性名和属性类型的方式都可以接收Function类型的传参
// props: ['addComment'],
props: {
addComment: Function
},
data () {
return {
name: null,
content: null
}
},
methods: {
addFunc () {
// 在子组件中调用父组件的Function类型的传参
this.addComment({name: this.name, content: this.content})
}
}
}
</script>
// 在子组件中接收父组件传参的完整写法 props
props: {
age: { // 参数名为age
type: Number, // 指定参数的类型,若类型不满足会在控制台警告
default: 0, // 指定参数的默认值,若没有传此参数则使用此默认值
required: true, // 参数是否必须,若没有传此参数会在控制台警告
// 自定义验证,返回false表示验证不通过,会在控制台警告
validator: function (value) {
return value >= 0
}
}
}
2. 父组件调用子组件方法或实例 this.refs
<template>
<div id="app">
<son ref="son"></son>
</div>
</template>
使用 :this.$refs.son.方法名/data值
3. 父组件调用子组件方法或实例 this.$children
#####################################################################
子向父
-
子向父传参
this.$emit() -
子组件调用父组件的方法或实例
this.$parent()
#####################################################################