文章目录
组件实例的作用域是孤立的。这就意味着不能在子组件的模板内直接引用父组件的数据。父组件的数据需要通过
props才能下送到子组件中。
子组件必须通过 props 访问父组件数据
- 一个组件可以直接在模板里面渲染
data中的数据(双大括号) - 子组件不能直接在模板中渲染父组件的数据。
- 如果子组件想引用父组件的数据，可以在引用子组件的时候，通过
属性绑定(v-bind:)的形式，把需要传递给子组件的数据，以属性绑定的形式传递到子组件的内部，供子组件使用。然后再把传递过来的属性，在props数组中定义一下，这样才能使用父组件中的数据。
简单例子：
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<title></title>
<script src='../lib/vue.js'></script>
</head>
<body>
<div id='app'>
<!-- 父组件，可以在引用子组件的时候，通过 属性绑定（v-bind:）的形式，把需要传递给子组件的数据，以属性绑定的形式传递到子组件的内部，供子组件使用 -->
<com1 :parent-msg="msg"></com1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '我是父组件中的数据'
},
methods: {},
components: {
com1: {
data() { //注意：子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件
// 自身私有的，比如：子组件通过啊 ajax ，请求回来的数据，都可以放到 data 身上
// data 上的数据，都是可读可写的(双向的)
return {
title: '123',
content: 'hhh'
}
},
template: '<h1 @click="change">这是子组件 ---{{parentMsg}}</h1>',
// 注意：组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的
// 注意：props 中的数据，都是只读的，无法重新赋值
props: ['parentMsg'], //把父组件传递过来的 parentMsg 属性，在 props 数组中 定义一下，这样，才能使用这个数据
methods:{
change(){
this.parentMsg="修改了"; //可以运行，点击过，会报错，因为 props 只读的
}
}
}
}
})
</script>
</body>
</html>
注意：
JavaScript中使用驼峰命名，HTML中使用短横线分割命名
<div id='app'>
<com1 :parent-msg="msg"></com1>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{我是父组件中的数据},
components: {
com1: {
// 在引用组件绑定属性的时候，以短横线命名，则在JavaScript中渲染的时候，用驼峰命名法
template: '<h1 @click="change">这是子组件 ---{{parentMsg}}</h1>',
data() {
return {
title: '123',
content: 'hhh'
}
},
props: ['parentMsg'],
methods:{
change(){
this.parentMsg="修改了" //可以运行，点击过，会报错，因为 props 只读的
}
}
}
}
})
</script>
子组件中的 data
子组件中的
data数据，并不是通过 父组件传递过来的，而是子组件 自身私有的，比如：子组件通过啊 ajax ，请求回来的数据，都可以放到 data 身上data 上的数据，都是可读可写的(双向的)
组件中的 props
组件中的 所有
props中的数据，都是通过 父组件传递给子组件的 ,注意：props 中的数据，都是只读的(单向)，无法重新赋值
子组件不能修改父组件中的数据
components: {
com1: {
template: '<h1 @click="change">这是子组件 ---{{parentMsg}}</h1>',
props: ['parentMsg'],
methods:{
change(){
this.parentMsg="修改了"; //可以运行，点击过，会报错，因为 props 只读的
}
}
}
}
当你点击之后，运行完，在控制台输出一下错误：
