VUE2.0组件的传值问题

来源：动视网责编：小采时间：2020-11-27 20:13:14

VUE2.0组件的传值问题

VUE2.0组件的传值问题:Vue1.0组件间传递使用$on()监听事件；使用$emit()在它上面触发事件；使用$dispatch()派发事件，事件沿着父链冒泡；使用$broadcast()广播事件，事件向下传导给所有的后代Vue2.0后$dispatch()，$broadcast()被弃用，见https://cn.

推荐度：

点击下载本文 文档为doc格式

导读VUE2.0组件的传值问题:Vue1.0组件间传递使用$on()监听事件；使用$emit()在它上面触发事件；使用$dispatch()派发事件，事件沿着父链冒泡；使用$broadcast()广播事件，事件向下传导给所有的后代Vue2.0后$dispatch()，$broadcast()被弃用，见https://cn.

Vue1.0组件间传递

　　使用$on()监听事件；
　　使用$emit()在它上面触发事件；
　　使用$dispatch()派发事件，事件沿着父链冒泡；
　　使用$broadcast()广播事件，事件向下传导给所有的后代

Vue2.0后$dispatch()，$broadcast()被弃用，见https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替换

1.子组件向父组件的传值：

Child.vue

<template>
 <p class="child">
 <h1>子组件</h1>
 <button v-on:click="childToParent">想父组件传值</button>
 </p>
</template>
<script>
 export default{
 name: 'child',
 data(){
 return {}
 },
 methods: {
 childToParent(){
 this.$emit("childToParentMsg", "子组件向父组件传值");
 }
 }
 }
</script>parent.vue

<template>
 <p class="parent">
 <h1>父组件</h1>
 <Child v-on:childToParentMsg="showChildToParentMsg" ></Child>
 </p>
</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.vue

<template>
 <p class="parent">
 <h1>父组件</h1>
 <Child v-bind:parentToChild="parentMsg"></Child>
 </p>
</template>
<script>
 import Child from './child/Child.vue'
 export default{
 name:"parent",
 data(){
 return {
 parentMsg:'父组件向子组件传值'
 }
 },
 components: {Child}
 }
</script>

child.vue

<template>
 <p class="child">
 <h1>子组件</h1>
 <span>子组件显示信息：{{parentToChild}}</span><br>
 </p>
</template>
<script>
 export default{
 name: 'child',
 data(){
 return {}
 },
 props:["parentToChild"]
 }
</script>

3.采用eventBus.js传值---兄弟组件间的传值

eventBus.js

import Vue from 'Vue'
export default new Vue()

App.vue

<template>
 <p id="app">
 <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>

FirstChild.vue

<template>
 <p class="firstChild">
 <input type="text" placeholder="请输入文字" v-model="message">
 <button @click="showMessage">向组件传值</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>

SecondChild.vue

<template>
 <p id="SecondChild">
 <h1>{{message}}</h1>
 </p>
</template>
<script>
 import bus from '../assets/eventBus';
 export default{
 name:'SecondChild',
 data(){
 return {
 message: ''
 }
 },
 mounted(){
 var self = this; 
 bus.$on('userDefinedEvent',function(message){ 
 self.message = message;//接值 
 });
 }
 }

VUE2.0组件的传值问题

推荐度：

点击下载本文 文档为doc格式

标签： VUE 的问题组件

热门焦点

VUE2.0组件的传值问题

VUE2.0组件的传值问题

VUE2.0组件的传值问题

最新推荐

猜你喜欢

热门推荐