Vue 使用Props属性实现父子组件的动态传值详解-偶像资源网

如下所示：

<!DOCTYPE html>
<html lang=\"en\" xmlns:v-on=\"http://www.w3.org/1999/xhtml\">
<head>
  <meta charset=\"UTF-8\">
  <title>Title</title>
  <script src=\"https://cdn.jsdelivr.net/npm/vue\"></script>
</head>
<body>
<div id=\"prop-example-2\">
  <input v-model=\"parentMsg\">
  <br>
  <child v-bind:my-message=\"parentMsg\"></child>
</div>
<script>
  Vue.component(\'child\',{
    props:[\'myMessage\'],
    template:\'<span>{{ myMessage }}</span>\'
  })
  new Vue({
    el:\'#prop-example-2\',
    data:{
      parentMsg:\'Messsssssssssssss\'
    }
  })
</script>
</body>
</html>

这里需要注意的是在html中的 my-message 就是scrpit中的 myMessage。因为：

HTML 特性是不区分大小写的。所以，当使用的不是字符串模板时，camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名)

以上这篇Vue 使用Props属性实现父子组件的动态传值详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

Vue 使用Props属性实现父子组件的动态传值详解

请登录后发表评论