巧用Vue 父组件通过Prop向子组件传值

巧用Vue 父组件通过Prop向子组件传值

先看下vue官方的说法:
在这里插入图片描述
总结来说:Prop是单向数据流。只能父传子,子不可以传父。但是有一种情况子可以直接传父,而且无报警。

// 父组件
<template>
  <div>
    //父向子传值<br>
    父组件:<input type="text" v-model="title">
    <child :title=title></child>
  </div>
</template>
<script>
import Child from "./Child"
export default {
  data(){
    return{
      title:"张三"
    }
  },
  components:{
   "child":Child,
  },
  methods:{
    
  }
}
</script>

// 子组件
<template>
  <div>
    // 子组件
    <h2>{{title}}</h2>
    子组件:<input type="text" v-model="title">
  </div>
</template>
<script>
export default {
  data() {
    return {
      childTitle:this.title
    }
  },
  props:{
    title:{
      type:String,
      require:true
    }
  },
  methods:{
    
  }
}
</script>

在这里插入图片描述
官方推荐子组件最好定义一个本地的data属性用来接收prop传过来的值。然后对本地data值进行操作处理,再通过$emit命令,将改变的值发送给父组件,实现父子组件通信。
在开发中,如果我们仅仅是通过子组件展示父组件传过来的数据,并不会对数据进行操作,我们可以直接把prop传过来的值直接绑定页面展示即可,这样,父组件值的更改,子组件可实时展示。
如果子组件本地data接收prop的值,这样父组件值的更改,子组件无法获知,这样可以通过watch监听prop数据的变化。
看如上代码,如果我们页面绑定prop数据,直接改变值,则页面报错。
在这里插入图片描述
vue不允许子组件直接改变父组件的值。
接下来,我们换下数据类型对上面的代码稍稍改动再看下。

// 父组件
<template>
  <div>
    //父向子传值<br>
    父组件:<input type="text" v-model="title.name">
    <child :title=title></child>
  </div>
</template>
<script>
import Child from "./Child"
export default {
  data(){
    return{
      title:{
        name:'张三'
      }
    }
  },
  components:{
   "child":Child,
  },
  methods:{
    
  }
}
</script>

// 子组件
<template>
  <div>
    // 子组件
    <h2>{{title.name}}</h2>
    子组件:<input type="text" v-model="title.name">
  </div>
</template>
<script>
export default {
  data() {
    return {
      childTitle:this.title
    }
  },
  props:{
    title:{
      type:Object,
      require:true
    }
  },
  methods:{
    
  }
}
</script>

我们将prop传输的数据类型改为Object,在子组件直接更改prop传过来的值页面并不会报错。这是为何?
在这里插入图片描述
因为Object是引用数据类型,父子组件绑定的同一个堆内存中的对象。
在这里插入图片描述
这可以作为一个父子组件双向通信的简易方案。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值