父组件向子组件传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--父组件可以在引用子组件的时候 通过 属性绑定的形式，把需要传递给子组件的数据以属性绑定的形式，传递到子组件内部 供
子组件使用-->
<com1 :parentmsg="msg"></com1>
</div>
</body>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"父组件中的数据"
},
components:{
com1:{
data:function(){//子组件中的data数据，并不是通过父组件传递过来的 而是子组件自身私有的，比如 子组件通过ajax
//请求回来的数据，都可以放到data身上
//data上的数据都是可读可写的
return {
title:"1",
content:"qqq"
}
},
methods:{
change(){
this.parentmsg='changge'
}
},
//经过演示，发现子组件中，默认无法访问到父组件中的data上的数据和methods中的方法
template:"<h1 @click='change'>这是子组件 ---{{parentmsg}}</h1> ",
//把父组件传递过来的parentmsg属性，先在props数组中 定义一下，这样 才能使用这个数据
//组件中的props中的数据，都是通过父组件传递给子组件的
props:['parentmsg']
//props中的数据都是只读的
}
}
})
</script>
</html>
使用的是PROPS来进行传值
子向父：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"> </script>
</head>
<body>
<div id="app">
<!--父组件向子组件传递方法，使用的是事件绑定机制-->
<com2 v-on:abcac="show"></com2>
</div>
<template id="tmp1">
<div>
<input type="button" value="点击" @click="myclick">
<h1>这是子组件</h1>
</div>
</template>
</body>
<script>
var com2={
template: "#tmp1",
data:function(){
return {
sonmsg:{age:6,name:"小头儿子"}
}
},
methods:{
myclick(){
this.$emit('abcac',this.sonmsg)
}
}
}
var vm=new Vue({
el:"#app",
data:{
datamsgFromSon:null
},
methods:{
show(data){
//console.log('调用了父组件的show方法'+data)
console.log(data)
this.datamsgFromSon=data
}
},
components:{
com2:com2
}
})
</script>
</html>
$emit方法 第一个参数是函数名 第二个是要传的值
网友评论