组件实例的作用域是孤立的。不能 在子组件的模板内直接引用父组件的数据。需要通过子组件的 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: '<p>{{ message }}</p>'
});
new Vue({
el: '#app',
data: {
message: "hello"
}
});
</script>
</body>
</html>
以上是自己的理解,仅供参考,若有错误与不足,欢迎指正
由于上面的实例哪一部分属于父组件,哪部分属于子组件不是太明了,可以和下面的实例想对照,这样会比较清晰一些。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prop</title>
<script src="vue.js"></script>
</head>
<body>
<!--div#app为父组件,child为子组件-->
<div id="app">
</div>
<script>
//先声明组件,才能使用组件。
Vue.component('child', {
// 声明props(数组),引用父组件的message。(只是引用该属性,并没有引用属性值)
props: ['message'],
template: '<p>{{ message }}</p>'
});
new Vue({
el: '#app',
data: {
message: "hello"
},
template:'<div>{{message}}<child message="hi!"></child></div>'
//child为在父集中引用的子组件
});
</script>
</body>
</html>