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

更新时间：2019年11月13日 15:17:53 作者：kaleid_liner

今天小编就为大家分享一篇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属性实现父子组件的动态传值详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue 的全选组件封装你知道多少
这篇文章主要为大家详细介绍了vue的全选组件封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
解决router.beforeEach()动态加载路由出现死循环问题
这篇文章主要介绍了解决router.beforeEach()动态加载路由出现死循环问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
详解Vue中添加过渡效果
本篇文章主要介绍了详解Vue中添加过渡效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03
Vue 使用beforeEach实现登录状态检查功能
今天小编就为大家分享一篇Vue 使用beforeEach实现登录状态检查功能，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
vue-router+nginx 非根路径配置方法
这篇文章主要介绍了vue-router+nginx 非根路径配置方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
Vue指令工作原理实现方法
自定义指令是 vue 中使用频率仅次于组件，其包含 bind 、 inserted 、 update 、 componentUpdated 、 unbind 五个生命周期钩子，接下来通过本文给大家详细介绍Vue指令工作原理实现方法，需要的朋友参考下吧
2021-06-06
vue.js中created()与activated()的个人使用解读
这篇文章主要介绍了vue.js中created()与activated()的个人使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
vue+axios全局添加请求头和参数操作
这篇文章主要介绍了vue+axios全局添加请求头和参数操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
这篇文章主要介绍了VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法,结合实例形式详细分析了VUE使用JS修改html对象的值导致没有更新到数据的原因与解决方法,需要的朋友可以参考下
2019-12-12
vue-cli单页面预渲染seo-prerender-spa-plugin操作
这篇文章主要介绍了vue-cli单页面预渲染seo-prerender-spa-plugin操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08