父传子
<html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="app">
</div>
<script type="text/javascript">
Vue.component('child',{
props: ['demo'],
template: `
<div>{{demo}}<div>
`
})
var vm = new Vue({
el: '#app',
data: {
demo: 'lalalademaxiya'
},
template: `
<child :demo="demo"></child>
`
})
</script>
</body>
</html>
</html>
这个只需要在父组件上定义一个数据，然后绑定到子组件上，子组件用props进行接收就好了
子传父
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="blog-posts-events-demo">
<div :style="{ fontSize: postFontSize + 'em' }">
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
v-on:enlarge-text="postFontSize += $event">
</blog-post>
</div>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{ post.title }}</h3>
<button v-on:click="$emit('enlarge-text',0.1)">
Enlarge text
</button>
<div v-html="post.content"></div>
</div>
`
});
new Vue({
el: '#blog-posts-events-demo',
data: {
posts: [ {title:'demaxiya'} ],
postFontSize: 1
}
})
</script>
</body>
</html>
在子组件的button上绑定一个点击事件，调用$emit(name,value) 就可以将数据发送出去，然后在父组件中，绑定监听事件,<blog-post @name=function></blog-post>,这样当子组件有参数传过来，父组件就可以监控到。
非父子组件间传值
<!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">
<child content="demaxiya"></child>
<child content="nuokesasi"></child>
</div>
<script type="text/javascript">
Vue.prototype.bus = new Vue();
Vue.component('child',{
props : ['content'],
data : function(){
return {
myContent : this.content
}
},
template : `
<div @click="handleClick">{{myContent}}</div>
`,
methods : {
handleClick : function(){
this.bus.$emit('change',this.myContent)
}
},
mounted : function(){
var _this = this;
_this.bus.$on('change',function(msg){
_this.myContent = msg;
})
}
});
new Vue({
el : '#app',
})
</script>
</body>
</html>
Vue.prototype.bus = new Vue() 创建一个bus总线。
this.bus.$emit('change',this.myContent) 往总线传一个值
然后在别的组件里去监听这个值
_this.bus.$on('change',function(msg){
_this.myContent = msg;
})
这样也实现了非父子组件的传值了
网友评论