您的位置：首页 > 产品设计 > UI/UE

vue.js中的子组件与父组件，prop传递数据

2017-07-07 16:06 811 查看

组件实例的作用域是孤立的。不能在子组件的模板内直接引用父组件的数据。需要通过子组件的 props 选项显式声明子组件的数据：

子组件与父组件的关系：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prop</title>
<script src="vue.js"></script>
</head>
<body>
<!--div为父组件，child为子组件-->
<div id="app">
{{message}}
<child message="hi!"></child>
<!--此处若不声明message，不会继承父组件的属性值。-->
</div>
<script>
//先声明组件，才能使用组件。
Vue.component('child', {
//        声明props（数组），引用父组件的message。（只是引用该属性，并没有引用属性值）
props: ['message'],
template: '<span>{{ message }}</span>'
});
new Vue({
el: '#app',
data: {
message: "hello"
}
});
</script>
</body>
</html>

以上是自己的理解，仅供参考，若有错误与不足，欢迎指正

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue-js 子组件父组件 prop

相关文章推荐

新的分享

章节导航