vue的props实现子组件随父组件一起变化
程序员文章站
2023-11-17 18:21:40
本文实例为大家分享了vue的props实现父组件变化子组件一起变化，供大家参考，具体内容如下
类似于用 v-bind 绑定 html 特性到一个表达式，也可以用 v-bi...
本文实例为大家分享了vue的props实现父组件变化子组件一起变化，供大家参考，具体内容如下
类似于用 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>
本文已被整理到了《vue.js前端组件学习教程》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇： Oracle表空间数据库文件收缩案例解析