本文介绍Vue.js中如何实现父子组件间的数据传递与通信。通过属性绑定(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</title>
<script src="js/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!-- 父组件，可以在引用子组件的时候，通过 属性绑定（v-bind：）的形式，把需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用-->
<com1 v-bind:parentmsg="msg"></com1>
</div>
<script>
//创建 Vue 实例，得到 viewmodel
var vue=new Vue({
el:'#app',
data:{
msg:'这是父组件中的数据'
},
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 数组中，定义一下，这样才能使用这个数据
directives:{},
filters:{},
components:{},
methods:{
change(){
this.parentmsg='被修改了'
}
}
}
}
})；
</script>
</body>
</html>
扫一扫
1079
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
