App.vue
- 在父组件给子组件绑定方法，:name有冒号，单项数据绑定，getName变成了一个方法，因为methods有个定义这个方法
<student :age="18" :name="getName"/>
...
new Vue({
...
methods:{
getName(){
console.log(123)
}
}
})
Student.vue
props:['age','name']
- 用props来接收父组件传递过来的属性标签名，age、name就是父组件在子组件Student写的属性标签 <student :age="18" :name="getName"/>
属性标签前面写冒号就代表v-bing，变成了js表达式，可以使用vue组件里面的配置 - function student(age=18){console.log(name)} >>> <student :age="18"/> (相当于function student(age=18)) 函数声明 >>> props:['age','name']（相当于{console.log(name)}函数体）
<template>
<!-- //name是赋值函数的变量，可以直接调用，结果是123 -->
<!-- function student（name = function getName(){
console.log(123)){ name()} -->
<div>
<h1>{{name()}}</h1>
</div>
</template>
<script>
export default {
props:['name']
}
</script>
- name是赋值函数的变量，可以直接调用
//在子组件中打印看到了,这就是个函数
mounted(){
console.log(this.name)
}
//ƒ getName() {
// console.log(2222222222);
// }
注意：回调函数getName还留在父组件的
- 如果我们修改父组件函数，传给子组件的函数也会变化
- 当父组件的函数改为有形参函数，子组件接收的函数也是有形参的
那么在子组件在调用的时候要传入实参
App.vue
//
<student :age="18" :name="getName"/>
...
new Vue({
...
methods:{
getName(x){
console.log(x)
}
}
})
Student.vue
<template>
<div>
<!-- //name是赋值函数的变量，可以直接调用，结果是haode-->
<h1>{{name('haode')}}</h1>
</div>
</template>
<script>
export default {
props:['name'],
mounted(){
console.log(this.name)
//结果是：
//ƒ getName(x) {
// console.log(x);
// }
}
}
</script>
- 当我们在App.vue父组件的getName函数中获取形参，将形参传给父组件中的data，代码如下：
data(){
return {
giveMine:''
}
}，
methods:{
getName(x){
this.giveMine = x //形参data的giveMine
console.log(x)
}，
- 所以，可以将子组件的数据的值传递给父组件
//good是实参。getName(x)的x是形参
<h1>{{name(good)}}</h1>//调用父组件传过来的方法getName，
//实际是：
//name=function getName(x){
// this.giveMine = x //形参赋值给data的giveMine
// console.log(x)
//}
//name(good)
props:['name'],
data(){
return{
good:"这是子组件的值"
}
}
