精华内容
下载资源
问答
  • VUE 兄弟组件之间传值

    2020-03-30 19:20:21
    Vue兄弟组件传值 创建一个公共实例文件 Bus.js import Vue from 'vue' const bus=new Vue() export default bus 子组件 A.vue <template> <div> <button @click='emitMessage'>传给兄弟组件...

    兄弟组件

    第一种

    子 B
    <template>
    	<input @input='handleInput' :value='value'>
    </template>
    
    <script>
    export default{
    	props:{
    		value:{
    			type:[String,Number],
    			default:''
    		}
    	},
    	methods:{
    		handleInput(e){
    			const val = e.target.value
    			this.emit('input',val)
    		}
    	}
    }
    </script>
    
    子 C
    <template>
    	<div>{{val}}</div>
    </template>
    
    <script>
    export default{
    	props:{
    		value:{
    			type:[String,Number],
    			default:''
    		}
    	}
    }
    </script>
    
    父 A
    <template>
      <div class="home">
        <h-b @input='handleInput'/>
        <h-c :value = 'val' />
      </div>
    </template>
    
    <script>
    
    export default {
      name: "Home",
      data() {
        return {
          val: ""
        };
      },
      components: {
        hB:()=>import("@/components/B.vue"),
        hC:()=>import("@/components/C.vue"),
      },
      methods:{
          handleInput(val){
              this.val = val
          }
      }
    };
    </script>
    

    第二种

    bus.js
    import Vue from 'vue'
    const bus=new Vue()
    export default bus
    
    子 A
    <template>
    	<div>
    		<button @click='emitMessage'>传给兄弟组件信息</button>
    	</div>
    </template>
    <script>
    // 引入 公共实例文件 bus.js
    	import bus from './bus.js'
    	export default{
    		data(){
    			return{
    				title:'子组件A'
    			}
    		},
    		methods:{
    		//需要传值用 methods方法
    			emitMessage(){
    				// 兄弟组件接受 theMessage 的 this.title 值
    				bus.$emit('theMessage',this.title)
    			}
    		}
    	}
    </script>
    
    子 B
    <template>
    	<div>
    		<h1>{{title}}</h1>
    	</div>
    </template>
    <script>
    // 引入 公共实例文件 bus.js
    	import bus from './bus.js'
    	export default{
    		data(){
    			return{
    				title:'子组件B'
    			}
    		},
    		mounted(){
    		//需要传值用 mounted 
    			bus.$on('theMessage',res=>{
    				console.log(res)
    				this.title = res	//经过子组件A的传值,此时显示的数据为子组件A的title 而不是子组件B的title
    			})
    		}
    	}
    </script>
    
    父 App
    <template>
    	<div>
    		<A/>
    		<B/>
    	</div>
    </template>
    <script>
    // 引入 子组件 A和B
    	import A from './views/A.vue'
    	import B from './views/B.vue'
    	export default{
    		components:{
    			A,
    			B
    		}
    	}
    </script>
    

    第三种

    Bus.js
    import Vue from 'vue'
    const bus=new Vue()
    export default bus
    
    main.js
    import bus from './bus'
    
    Vue.prototype.$bus=bus
    
    子 A
    <template>
    	<div>
    		<button @click='emitMessage'>传给兄弟组件信息</button>
    	</div>
    </template>
    
    <script>
    	export default{
    		data(){
    			return{
    				title:'子组件A'
    			}
    		},
    		methods:{
    		//需要传值用 methods方法
    			emitMessage(){
    				// 兄弟组件接受 getMessage 的 this.title 值
    				this.$bus.$emit('getMessage',this.title)
    			}
    		}
    	}
    </script>
    
    子 B
    <template>
    	<div>
    		<h1>{{title}}</h1>
    	</div>
    </template>
    
    <script>
    	export default{
    		data(){
    			return{
    				title:''
    			}
    		},
    		mounted(){
    		//需要传值用 mounted 
    			this.$bus.$on('getMessage',data=>{
    				this.title = data	
    			})
    		}
    	}
    </script>
    
    展开全文
  • Vue兄弟组件之间传值

    2020-05-20 08:28:48
    兄弟组件之间Vue实例传 示例: <div id="app"> <ca></ca> <cb></cb> </div> var bus=new Vue();//定义一个Vue实例 Vue.component('ca', template:` <div> <...

    兄弟组件之间用Vue实例传
    示例:

    <div id="app">
    	<ca></ca>
    	<cb></cb>
    </div>
    var bus=new Vue();//定义一个Vue实例
    Vue.component('ca',
    	template:`
    		<div>
    			<h1>组件A</h1>
    			<button @click="sendEvent">发送</button>
    		</div>
    	`,
    	data:function(){
    		return{
    		msg:"A组件传B组件"
    		}
    	},
    	methods:{
    		send(){
    			bus.$emit('sendEvent',this.msg)
    		}
    	}
    })
    Vue.component('cb',{
    	template:`
    		<div>
    			<h1>组件B</h1>
    			<p>{{txt}}</p>
    		</div>
    	`,
    	data:function(){
    		txt: ""
    	},
    	mounted(){
    		var that=this
    		bus.$on("sendEvent",function(a){
    			that.txt=a;
    		})
    	}
    })
    
    
    
    自定义指令
    语法:
    
    ```csharp
    Vue.directive('a',
    	inserted(el){ //生命周期,被绑定元素插入父节点是调用;el是形参,但不能改变
    	
    	}
    )
    随机变换颜色示例:
    
    ```csharp
    Vue.direvtive('color',{
    	var num=(Math.random()*100000.toFixed(0))
    	el.style.background='#'+num
    })
    
    Vue.use()主要用于在Vue中安装插件。
    插件可以是一个函数也可以是一个对象,如果是对象,必须提供 install()方法。
    
    
    
    
    展开全文
  • vue兄弟组件之间传值和方法调用

    千次阅读 2020-05-29 18:15:28
    vue兄弟组件之间传值和方法调用 1.兄弟组件相互传值 1.1 vuex传值 实现效果:兄弟组件之间传值,child1的值发生变化,child2值也能随之发生变化 子组件一代码,child1.vue,点击button,连接store.js mutations...

    vue兄弟组件之间传值和方法调用

     

    1.兄弟组件相互传值

    1.1 vuex传值

    实现效果:兄弟组件之间传值,child1的值发生变化,child2值也能随之发生变化

    子组件一代码,child1.vue,点击button,连接store.js mutations中的changeTitle事件,进行更改值

    <template>
      <div>
         <input type="text"v-model="title"/>
          <button type="button" @click="handleClickChangeTitle(title)">更改title的值</button>
        <div>{{title}}</div>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          title: ""
        };
      },
      methods: {
        handleClickChangeTitle(title){
            this.$store.commit("changeTitle",title)
        }
      }
    }
    </script>

     

    子组件二代码:child2.vue直接显示store.js中state中的值即可

    <template>
      <div>{{$store.state.title}}</div>
    </template>
    

    store.js代码,

    import Vue from "vue";
    import Vuex from "vuex";
    
    Vue.use(Vuex);
    
    export default new Vuex.Store({
      state: {
        title: ""
      },
      mutations: {
        changeTitle(state, title) {
          state.state = title;
        }
      }
    });
    

     

    1.2 $emit传值,props接收

    使用$emit将child1.vue的值给父组件,父组件将值传给child2.vue,child2.vue使用props接收

    parent.vue

    <template>
      <div>
         <h2>我是父组件</h2>
         <child1 @handleClickChange="handleClickChangeTitle"></child1>
         <child2 :ptitle="title"></child2>
      </div>
    </template>
    <script>
    import child1 from "child1";//文件地址
    import child2 from "child2";//文件地址
    export default {
      data() {
        return {
          title: ""
        };
      },
      components: {
        child1,
        child2
      },
      methods: {
        handleClickChangeTitle(title){//将改方法传递给child1组件
            this.title = title
        }
      }
    }
    </script>

    child1.vue

    <template>
      <div>
         <h2>我是child1组件</h2>
         <div>
         <input type="text"v-model="title"/>
          <button type="button" @click="handleClickChangeTitle(title)">更改title的值</button>
        <div>{{title}}</div>
      </div>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          title: ""
        };
      },
      methods: {
        handleClickChangeTitle(title){
            this.$emit("handleClickChange",title)//连接父组件的handleClickChange方法,同时将值传递给父组件
        }
      }
    }
    </script>

    child2.vue

    <template>
      <div>{{ptitle}}</div>
    </template>
    <script>
    export default {
    //接收父组件穿过来的值ptitle
     props:{ptitle:{ type: String}}
    }
    </script>

     

    1.兄弟组件相互调用方法

    父组件代码

    <template>
      <div>
         <h2>我是父组件</h2>
         <child1 @handleClickChange="handleClickChangeTitle"></child1>
         <child2 ref="changeTitle"></child2>
      </div>
    </template>
    <script>
    import child1 from "child1";//文件地址
    import child2 from "child2";//文件地址
    export default {
      data() {
        return {
          title: ""
        };
      },
      components: {
        child1,
        child2
      },
      methods: {
        handleClickSearch() {
          //header组件和home组件相互通信
          this.$refs.changeTitle.changeTitle();
        }
      }
    }
    </script>
    

    child1.vue代码

    <template>
      <div>
         <h2>我是child1组件</h2>
         <div>
         <input type="text"v-model="title"/>
          <button type="button" @click="handleClickChangeTitle(title)">更改title的值</button>
        <div>{{title}}</div>
      </div>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          title: ""
        };
      },
      methods: {
        handleClickChangeTitle(title){
            this.$emit("handleClickChange",title)//连接父组件的handleClickChange方法,同时将值传递给父组件
        }
      }
    }
    </script>

    child2.vue代码

    <template>
      <div></div>
    </template>
    <script>
    export default {
      methods: {
        changeTitle() {
          console.log("我是child2组件,changeTitle方法由child1组件触发")
        }
      }
    }
    </script>
    
    

    后期继续更新!

    展开全文
  • <div class="wapshare" v-show="iscancle"> 我是分享内容 <p class="share_cancle" @click="cancle">取消</p> </div> <script> export default { data () { ...
  • vue兄弟组件之间传值之Bus 可以用过一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,之后通过分别调用Bus事件触发 $emit 和监听 $on 来实现组件之间的通信和参数传递,类似window的全局自定义事件。...

    2020/3/22

    vue兄弟组件之间传值之Bus

    可以用过一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,之后通过分别调用Bus事件触发 $emit 和监听 $on 来实现组件之间的通信和参数传递,类似window的全局自定义事件。类似与子传父,只不过是利用一个新的vue示例作为媒介,而不是当前vue示例(this)

    // bus.js
    
    import Vue from 'vue';
    export default new Vue;
    
    // 组件a.js
    
    <template>
      <div class='a'></div>
    </template>
    
    <script>
    import Bus from 'bus.js' ;
    export default {
      name: "a",
      created() {
        // 在需要的传递数据的时候调用sendData方法,这里模拟调用
        this.sendData();
      },
      methods: {
        sendData () {
          Bus.$emit('listenToA', 'hello');
        }
      }
    }
    </script>
    
    // 组件b.js
    
    <template>
      <div class='b'></div>
    </template>
    
    <script>
    import Bus from 'bus.js';
    export default {
      name: "b",
      monted() {
        Bus.$on('listenToA', this.getAData);
      },
      methods: {
        getAData (val) {
          console.log(`a组件传递过来的数据: ${val}`); // hello
        }
      }
    }
    </script>
    
    展开全文
  • 从一知半解,再到另一种一知半解,前端就是这么神奇的历程,所以不要怕没有搞不定的事儿,多想想总会栽到坑里再爬起来不就完了的事。所以啊,千万别给自己设上限。 ** 父子组件传值的精髓: ...vue兄弟之间传值的...
  • 兄弟组件之间Vue实例传 示例:
  • 在相互通信的兄弟组件中都引入eventBus,让各兄弟组件共用一个事件机制。 3. 通过eventBus.$emit(事件名,参数)传递数据,eventBus.$on(事件名,参数=> {})接收据 二、实例代码 A组件往B组件传递数据data 1....
  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。是一个公共储存空间。 #首先 确保环境中已经下载vuex cnpm ...
  • vue兄弟组件之间传值的两种办法

    千次阅读 2020-07-07 13:59:42
    Vue.prototype.$bus=new Vue(); 父组件 <template> <div> <child1></child1> <child2></child2> </div> </template> <script> import child1 from './...
  • vue 兄弟组件之间传值之bus

    千次阅读 2018-07-09 11:28:47
    有时候两个组件也需要通信(非父子关系)。当然Vue2.0提供了Vuex,但在简单的场景下,可以使用一个空的Vue实例作为中央事件总线。参考:...
  • 第一步:在assert文件夹下创建一个eventBus.js文件 第二步:在components文件夹下创建一个文件,用来传递数据。(触发自定义函数) 第三步:在components文件夹下...第四步:在addshop.vue里使用这两个组件。 ...
  • Vue.prototype.bus=new Vue(); 2.分享按钮 加点击事件;把这个true值传给组件二 <a href="#" class="wap-zl-share" @click="share1"> </a> <script> export default { data () { return { ...
  • 组件之间传值

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,699
精华内容 1,879
关键字:

vue兄弟组件之间传值

vue 订阅