Vue快速学习笔记(4)Vue组件中的数据传递
2020-02-11 15:33:53 Vue
Vue组件中的数据传递
父组件向子组件传递数据:
-
使用
props
属性来定义子组件的数据。 -
使用
v-bind
指令在组件中可以使父组件的数据传递到子组件中。
示例代码
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="assets/plugins/vue.js"></script>
<template id="mh">
<h1> {{finfo}}</h1>
</template>
<div id="app">
<mh finfo="子组件的数据"></mh>
<mh :finfo="msg"></mh>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg:"这是父组件Vue实例中传来的消息。"
},
components:{
mh:{
template:"#mh",
props:['finfo']
}
}
});
</script>
子组件向父组件传值
发现错误?想参与编辑?
在 GitHub 上编辑此页!
如果您有什么问题,欢迎加入Python/Javascript学习讨论群询问
Python/Javascript学习QQ群号:217840699