Vue：子组件接收不到父组件所传的值（v-bind）

最新推荐文章于 2024-04-23 16:04:11 发布

雨雪风晴是你

最新推荐文章于 2024-04-23 16:04:11 发布

阅读量4.2k

点赞数 2

分类专栏： Vue 文章标签： Vue 父子组件传值 v-bind props 前端

本文链接：https://blog.csdn.net/weixin_42941619/article/details/94583009

版权

Vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一个很基础的父组件向子组件传值：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <chil :parentMsg="msg"></chil>
  </div>

  <template id="chil">
    <div>
      <h4>I'm child element! {{ parentMsg }} </h4>
    </div>
  </template>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  var chil =  {
    template:'#chil',
    props:['parentMsg'],
    data(){
      return {}
    },
    methods: {},
  }

  var Vm = new Vue({
    el:'#app',
    data(){
      return {
        msg:'P,I have a pen,I have an apple.Ang,ApplePen!'
      }
    },
    methods: {},
    components:{
      chil
    }
  })
</script>
</html>

此时页面渲染出：I'm child element!

但是通过v-bind绑定的parentMsg，子组件却没有接收到，出现的原因是：驼峰写法！

Html中是不区分大小写的，所以v-bind下的parentMsg===parentmsg，而js内的props中是区分大小写的，这样子组件中，本应该接收的应该是parentmsg，所以接收不到父组件所传的值，均改为小写模式，就可以解决这个问题。

巴拉巴拉：

==主页传送门==

雨雪风晴是你

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue：子组件接收不到父组件所传的值（v-bind）

一个很基础的父组件向子组件传值：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...
复制链接

扫一扫