子传父
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<div>{{name}}</div>
<!--
注意@:name_s="getname" 的函数不能写括号 也不能传参
-->
<mycom @name_s="getname"></mycom>
</div>
</body>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
name:'父组件的值'
},
methods:{
//子组件传过来的值改变父组件里的值
getname:function(name_){
this.name=name_;
console.log(2);
}
},
//子组件
components:{
'mycom':{
template:"<div>{{name}}<button @click='fn'>点击</button></div>",
data:function(){
return{
name:"子组件值"
}
},
methods:{
fn:function(){
//这里的字传父利用vue的emit事件来去往回传值
//第一个参数是自定义标识符字符串
//第二个参数表示要往回发送的数据
this.$emit('name_s',this.name);
console.log(1);
}
}
}
}
})
</script>
</html>
子传父
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<div>{{name}}</div>
<mycom :my_com="title"></mycom>
</div>
</body>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
name:'父组件的值',
title:"你好"
},
//子组件
components:{
'mycom':{
template:"<div>{{name}},父组件传过来的值:{{my_com}},{{my_com}}</div>",
props:['my_com'],
data:function(){
return{
name:"子组件值"
}
}
}
}
})
</script>
</html>
