Home >Web Front-end >JS Tutorial >Value passing problem of VUE2.0 components
##Transfer between Vue1.0 componentsUse $on() to listen for events;
Use $emit() to trigger events on it;
Use $dispatch() to dispatch events, which bubble along the parent chain;
Use $broadcast() to broadcast events, and events are propagated downward to all descendants
1. Pass the value from the child component to the parent component:
##Child.vue<template>
<p>
</p>
<h1>子组件</h1>
<button>想父组件传值</button>
</template>
<template> <p> </p> <h1>父组件</h1> <child></child> </template> <script> import Child from './child/Child.vue' export default{ name:"parent", data(){ return { } }, methods: { showChildToParentMsg:function(data){ alert("父组件显示信息:"+data) } }, components: {Child} } </script>
2. Parent component passes value to child component
parent.vue <template>
<p>
</p>
<h1>父组件</h1>
<child></child>
</template>
child.vue<template>
<p>
</p>
<h1>子组件</h1>
<span>子组件显示信息:{{parentToChild}}</span><br>
</template>
3. Use eventBus.js to pass value ---Brother Value transfer between components
##eventBus.jsimport Vue from 'Vue'
export default new Vue()
<template>
<p>
<secondchild></secondchild>
<firstchild></firstchild>
</p>
</template>
<script>
import FirstChild from './components/FirstChild'
import SecondChild from './components/SecondChild'
export default {
name: 'app',
components: {
FirstChild,
SecondChild,
}
}
</script>
<template>
<p>
<input>
<button>向组件传值</button>
<br>
<span>{{message}}</span>
</p>
</template>
<script>
import bus from '../assets/eventBus';
export default{
name: 'firstChild',
data () {
return {
message: '你好'
}
},
methods: {
showMessage () {
alert(this.message) bus.$emit('userDefinedEvent', this.message);//传值
}
}
}
</script>
<template>
<p>
</p>
<h1>{{message}}</h1>
</template>
The above is the detailed content of Value passing problem of VUE2.0 components. For more information, please follow other related articles on the PHP Chinese website!