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

来源：互联网发布：mac看图片编辑：程序博客网时间：2024/04/28 21:19

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

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

使用 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>

0 0