1.png
一直没找到比较合适的教程，自己写了个 ，大家可以参考下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--vue.js 2.3-->
<div id="app">
<h1>父组件与子组件之间传递数据</h1>
<father-group></father-group>
</div>
<template id="group">
<div>
<h3>hello vue fatherGroup</h3>
<p>{{msgtext}}</p>
<!--父组件向子组件通信，需要在子组件上bind一个自定义指令(指令可以随意填写)，这个指令的值是父组件的需要传递的msg-->
<sub-group :msg="msg" @names="get"></sub-group>
<!--子组件向父组件通信，@自定义一个事件(这个事件随意填写)，后面的跟的函数不能有()也就是不能有括号-->
</div>
</template>
<template id='sub-group'>
<div>
<button @click="send()">btn</button>
<ul class="list-group">
<li class="list-group-item">subGroup</li>
<li class="list-group-item">subGroup</li>
<li class="list-group-item">subGroup</li>
<li class="list-group-item">subGroup</li>
<li class="list-group-item">subGroup</li>
<li class="list-group-item">subGroup</li>
<li class="list-group-item">{{msg}}</li>
<li class="list-group-item">{{submsg}}</li>
</ul>
</div>
</template>
<script type="text/javascript">
new Vue({
el:'#app',
components:{
'fatherGroup':{
data(){
return {
msg:'这是父组件的信息(father)',
msgtext:'btn点击后会被子组件的信息代替'
}
},
template:'#group',
methods:{
get:function(str){
console.log(str)
this.msgtext = str; //这里的参数str就是子组件传递给父组件的信息
}
},
components:{
'subGroup':{
template:'#sub-group',
data(){
return {
submsg:'这是子组件的信息(sub)'
}
},
props:['msg'], //子组件接收父组件的数据
methods:{
send:function(){
// 子组件向父组件传递数据
this.$emit('names',this.submsg)
}
}
}
}
}
}
})
</script>
</body>
</html>
网友评论