不整虚的,直接摆一个小案例
实现效果:父组件向子组件传值,并修改父组件的值
<!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>Document</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 父组件可以在引用子组件的时候,通过属性绑定的方式,把需要传递给子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用 -->
<com1 :parentmsg="msg"></com1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '123父组件中的数据',
},
methods: {},
components: {
//结论:经过演示,发现,子组件,默认无法访问到父组件中的data上的数据和methods中的方法
com1: {
data() { //注意:子组件中data数据,并不是通过父组件传递过来的,而是子组件自身私有的,比如:子组件通过Ajax,请求回来的数据,都可以放到data身上
//data上的数据,都是可读可写的
return {
title: '123',
content: 'qqq',
}
},
template: '<h1 @click="change">这是子组件---{{parentmsg}}</h1>',
//组件中的所有props中的数据,都是通过父组件传递给子组件的
//props中的数据,都是只读的,无法重新赋值
props: ['parentmsg'], //把父组件传递过来的parentmsg属性,现在props数组中,定义一下,这样才可以使用这个数据
methods: {
change() {
this.parentmsg = '被修改了';
}
}
}
}
});
</script>
</body>
</html>