vue的props实现子组件随父组件一起变化

人气：676 时间：2019-04-07

这篇文章主要为大家详细介绍了vue的props实现子组件随父组件一起变化，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

本文实例为大家分享了vue的props实现父组件变化子组件一起变化，供大家参考，具体内容如下

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 绑定动态 Props 到父组件的数据。每当父组件的数据变化时，也会传导给子组件：

代码如下：


<div>
 <input v-model="parentMsg">
 <br>
 <child v-bind:my-message="parentMsg"></child>
</div>

End q1010.com

使用 v-bind 的缩写语法通常更简单：<child :my-message="parentMsg"></child>

实例：

代码如下：


<!DOCTYPE html>
<html lang="en">

<head>
 <script type="text/javascript" src="vue.js"></script>
 <meta charset="UTF-8">
 <title>vue的props实现父组件变化子组件一起变化</title>
</head>

<body>
<div id="app1">
 <input v-model="messsage" > <!--input绑定实例中data中的message-->
 <div >
 <child v-bind:my-message="messsage"></child> <!--子组件绑定实例中data中的message-->
 </div>

</div>

 <script>
 Vue.config.debug = true;
 Vue.component('child',{
  props: ['myMessage'], //VUE实例中myMessage 等价于my-message
  template: '<span>{{ myMessage }}</span><br>'
 });
 var vm = new Vue({
  el: '#app1',
  data:{
  messsage:'hello you are a good boy!'
  }
 });
 </script>
</body>

</html>

End q1010.com

本文来自：http://www.q1010.com/184/2986-0.html

注：关于vue的props实现子组件随父组件一起变化的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js

您可能感兴趣的文章

上一篇：分分钟玩转Vue.js组件

下一篇：Vue.js快速入门实例教程