vue的props实现子组件随父组件一起变化 - CSDN文库

46 浏览量更新于2023-05-04 收藏 30KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

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

本文实例为大家分享了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" >

<div >

<child v-bind:my-message="messsage"></child>

</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组件学习教程进行学习。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

weixin_38735782

粉丝: 5
资源: 979

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈