主页 / 网络编程 /

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

网络编程 2021-07-04 15:02www.168986.cn编程入门
今天长沙网络推广就为大家分享一篇Vue 使用Props属性实现父子组件的动态传值详解，具有很好的参考价值，希望对大家有所帮助。一起跟随长沙网络推广过来看看吧

如下所示：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://.w3./1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.jsdelivr./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.ponent('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属性实现父子组件的动态传值详解就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。

上一篇：vue prop属性传值与传引用示例 下一篇：浅谈vue 锚点指令v-anchor的使用

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by