【vue】父组件主动调用子组件 /// 非父子组件传值
一 父组件主动调用子组件:
注意:在父组件使用子组件的标签上注入ref属性,例如:
<div id="home"> <v-header ref="header"></v-header> <hr> 首页组件 <button @click="getChildData()">获取子组件的数据和方法</button> </div>
父组件主动获取子组件的数据和方法: 1.调用子组件的时候定义一个ref <v-header ref="header"></v-header> 2.在父组件里面通过 this.$refs.header.属性 this.$refs.header.方法
二 非父子组件传值
注意:非父子组件传值,但两个组件必须被在一个页面中使用了。例如 home组件和news组件互相传值:
<template> <div id="app"> <v-home></v-home> <br> <v-news></v-news> </div> </template>
(1)创建vue实例
import Vue from 'vue'; var VueEvent = new Vue() export default VueEvent;
(2)$emit $on
<template> <div id="news"> 我是新闻组件 <br> <button @click="emitHome()">给Home组件广播数据</button> <br> </div> </template> <script> //引入 vue实例 import VueEvent from '../model/VueEvent.js'; export default{ data(){ return { msg:'我是一个新闻组件' } }, methods:{ emitHome(){ //广播 VueEvent.$emit('to-home',this.msg) } }, mounted(){ VueEvent.$on('to-news',function(data){ console.log(data); }) } } </script>
<template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> 我是首页组件 <br> <button @click="emitNews()">给News组件广播数据</button> <br> </div> </template> <script> //引入 vue实例 import VueEvent from '../model/VueEvent.js'; export default{ data(){ return { msg:'我是一个home组件', title:'首页111' } },methods:{ emitNews(){ //广播数据 VueEvent.$emit('to-news',this.msg) } }, mounted(){ //监听news 广播的数据 VueEvent.$on('to-home',function(data){ console.log(data); }) } } </script> <style lang="scss" scoped> </style>
作者:小德cyj
出处:http://www.cnblogs.com/dongzhuangdian
欢迎转载,希望注明出处