Vue.js——父子组件通信-父传子（props驼峰标识）——2020.11.27

最新推荐文章于 2024-05-17 08:00:00 发布

Blockchain_KT

最新推荐文章于 2024-05-17 08:00:00 发布

阅读量413

点赞数 1

分类专栏： Vue.js-实战开发文章标签： vue 分布式 react js proxy

本文链接：https://blog.csdn.net/weixin_43402353/article/details/110245536

版权

Vue.js-实战开发专栏收录该内容

64 篇文章 46 订阅

订阅专栏

父子组件通信-父传子

一丶props驼峰标识

如果props使用的驼峰标识，在动态绑定的时候，不能直接绑定，在每个大写字母前面需要加一个-

二丶案例代码

<!--作者：key-->
<!--浏览工具：Chrome-->
<!--开发工具：WebStorm-->
<!--开发时间：2020/11/27 20:07-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
<!--  <cpn :cinfo="info"></cpn>-->
<!--  驼峰标识绑定法-->
  <cpn :c-Info="info"></cpn>
</div>

<template id="cpn">
  <h2>{{cInfo}}</h2>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const cpn ={
    template:'#cpn',
    props:{
      //驼峰标识
      cInfo:{
        type:Object,
        default(){
          return{

          }
        }
      }
    }
  }
  const app = new Vue({
    el:"#app",
    data:{
      info:{
        name:'key',
        age:20,
        height:1.83
      }
    },
    components:{
      cpn
    }
  })
</script>
</body>
</html>

三丶运行结果

在这里插入图片描述

——天生我材必有用，千金散尽还复来——

Blockchain_KT

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
Vue.js——父子组件通信-父传子（props驼峰标识）——2020.11.27

父子组件通信-父传子一丶props驼峰标识二丶案例代码三丶运行结果——天生我材必有用，千金散尽还复来——一丶props驼峰标识如果props使用的驼峰标识，在动态绑定的时候，不能直接绑定，在每个大写字母前面需要加一个-二丶案例代码<!DOCTYPE html><h
复制链接

扫一扫