vue-props（2）

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:"这是子组件的值"
  }
 }
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容