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

    2020-10-14 09:58:04
    兄弟组件传值 创建3个文件 1:bus,公交JS文件 2:哥哥组件 3:弟弟组件 bus.js代码 import Vue from 'vue' export default new Vue() 哥哥组件代码: <template> <div id="gege"> <top title=...

    兄弟组件传值

    创建3个文件
    1:bus,公交JS文件
    2:哥哥组件
    3:弟弟组件

    bus.js代码

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

    哥哥组件代码:

    <template>
     <div id="gege">
     <top title="兄弟组件"></top>
      <p>这里是哥哥组件</p>
      <p>这个是哥哥的数据----{{txt}}</p>
      <button @click="btn()" class="btn">发送数据</button>
      <didi></didi>
     </div>
    </template>
    
    <script>
    import bus from '../bus.js'
    import didi from './didi.vue'
    export default{
      name:'gege',
      data(){
        return{
          txt:'哥哥的数据内容'
        }
      },
      methods:{
      btn(){
        bus.$emit('data',this.txt)
      }
      },
      components:{didi}
    }
    </script>
    
    <style>
    </style>
    
    

    弟弟组件代码:

    <template>
     <div id="didi">
      <p>这里是弟弟组件</p>
      <p>这个是弟弟的默认数据----{{msg}}</p>
     </div>
    </template>
    
    <script>
    import bus from '../bus.js'
    export default{
      name:'didi',
      data(){
        return{
          msg:'默认值'
        }
      },
       mounted(){
        bus.$on('data',(msg)=>{
          this.msg=msg
          console.log(msg)
        })
    
      },
    }
    </script>
    
    <style>
    </style>
    
    
    展开全文
  • 兄弟组件传值和VUEX事件总线传值新建一个js文件 memeda.jsimport Vue from 'Vue'var Bus = new Vue({})export default Bus新建两个组件{{msg}} 发送import Bus from '../memeda.js'import Home1 from './home1'//...

    非兄弟组件传值和VUEX

    事件总线传值

    新建一个js文件 memeda.jsimport Vue from 'Vue'

    var Bus = new Vue({})

    export default Bus

    新建两个组件

    {{msg}}

    发送

    import Bus from '../memeda.js'

    import Home1 from './home1'//引入Home1组件 同一页面展示

    export default {

    components:{

    Home1

    },

    data(){

    return{

    msg:'我是home'

    }

    },

    methods:{

    fn(){

    Bus.$emit('meme',this.msg)

    }

    }

    }

    {{msg}}

    import Bus from '../memeda.js'

    export default {

    data(){

    return{

    msg:'我是home1111'

    }

    },

    mounted(){

    Bus.$on('meme',(res)=>{

    alert(res);//我是home

    })

    }

    }

    VUEX传值(mutations和state)

    逻辑图

    安装VUEXnpm i vuex --save

    自建js文件import Vue from 'vue'

    import Vuex from 'vuex'//引入vuex

    Vue.use(Vuex)//挂载

    var state1 ={

    count:1

    }

    var mutations={//定义一个方法 所有的全局方法都可以加在里面

    incCount(){//函数名

    ++state1.count;

    }

    }

    var state = new Vuex.Store({//实例化Vuex

    state:state1,//固定写法

    mutations//固定写法 通过this.$store.commit调用

    })

    export default state

    全局main.js引入import store from './store/index'

    new Vue({

    store,

    })

    全局组件调用数据{{this.$store.state.count}}

    全局调用方法 发送

    methods:{

    dianji(){

    this.$store.commit('incCount');//对应的是自建js文件里面的方法

    }

    }

    Getters方法import Vue from 'vue'

    import Vuex from 'vuex'//引入vuex

    Vue.use(Vuex)//挂载

    var state1 ={

    count:1

    }

    var mutations={//定义一个方法 所有的全局方法都可以加在里面

    incCount(){//函数名

    ++state1.count;

    }

    }

    var getters={//通过this.$store.getters.computedCount调用

    computedCount(){//当state里面数据发生变化后自己自动计算的值

    return state1.count*20//必须return

    }

    }

    var state = new Vuex.Store({//实例化Vuex

    state:state1,//固定写法

    mutations,//固定写法 通过this.$store.commit调用

    getters//挂载getters

    })

    export default state

    调用

    Getters数据:{{this.$store.getters.computedCount}}

    Action异步方法(ajax,计时器)

    Action 类似于 mutation,不同在于:Action 提交的是 mutation,而不是直接变更状态。

    Action 可以包含任意异步操作。import Vue from 'vue'

    import Vuex from 'vuex'//引入vuex

    Vue.use(Vuex)//挂载

    var state1 ={

    count:1

    }

    var mutations={//定义一个方法 所有的全局方法都可以加在里面

    incCount(){//函数名

    ++state1.count;

    }

    }

    var getters={//通过this.$store.getters.computedCount调用

    computedCount(){//当state里面数据发生变化后自己自动计算的值

    return state1.count*20//必须return

    }

    }

    var actions = {//定义actions

    memeda(context){//形参必写!!! 通过this.$store.dispatch('memeda')调用

    context.commit('incCount');//执行上面的方法 固定写法

    }

    }

    var state = new Vuex.Store({//实例化Vuex

    state:state1,//固定写法

    mutations,//固定写法 通过this.$store.commit调用

    getters,//挂载getters

    actions//挂载actions

    })

    export default state

    调用 Actions

    methods:{

    aaa(){

    this.$store.dispatch('memeda')

    }

    }

    展开全文
  • 兄弟组件传值 兄弟组件之间彼此没有联系,它们需要通过中间Vue实例对象bus(快递员)进行数据传递。 1. 声明事件 给组件实例(或Vue实例) 声明事件有两种方式: 直接声明 通过$on实现 给组件实例声明事件: <...

    兄弟组件传值

    在这里插入图片描述

    • 兄弟组件之间彼此没有联系,它们需要通过中间Vue实例对象bus(快递员)进行数据传递。

    1. 声明事件

    给组件实例(或Vue实例) 声明事件有两种方式:

    1. 直接声明
    2. 通过$on实现

    给组件实例声明事件:

    <组件 @事件名称="事件驱动方法"></组件>
    

    通过$on进行声明:

    // 语法:
    组件实例.$on(事件名称,事件驱动方法(形参,形参){})
    // 例如:
    // 声明事件
    vm.$on('hello',function(traffic,city){console.log(`我坐着{$traffic}到达${city}城市`)})
    

    注意:组件实例 和 vue实例 都可以调用$on。

    2. 兄弟组件传值

    实现步骤

    1. 定义模块 src/bus.js,内容就是导入Vue模块,并导出一个Vue实例对象:

      import Vue from 'vue'
      export default new Vue() 
      
    2. 在各个兄弟组件中,导入 bus.js 模块:

      import bus from '@/bus.js'
      

      虽然bus.js被各个组件都导入,但是系统中bus只有一份。

    3. 接收数据的兄弟组件的 created 生命周期方法里(使得事件及时响应),发送数据的组件中声明

      使用 bus.$on(‘事件名称’, (接收的数据) => {}) 定义事件成员方法

      created(){
        // 定义事件,注意箭头函数应用
        bus.$on('xxx', data=>{
          console.log(data)
        })
      }
      

      xxx是事件方法的名称。data是形参,待接收数据,并且可以定义多个。

      注意:如果$on内部要使用this,请通过"箭头函数"声明方法。

    4. 发送数据的兄弟组件中,使用 bus.$emit(‘事件名称’, 要发送的数据) 来向外发送参数。

      <button @click="sendMsg">传值</button>
      export default {
        methods: {
          sendMsg(){
            // 触发绑定的事件,并向外传递参数。
            bus.$emit('xxx', '1000元保护费')
          }
        }
      }
      

    第一个参数xxx 是接收数据组件给bus声明的方法。第二个参数是传递的实参数据。

    说明

    1. Vue实例可以调用$on()方法进行事件方法创建

      实例.$on(名称,(形参,形参,形参……){})
      

      参数根据需要,可以是一个或多个。

    2. Vue实例可以调用$emit()方法进行事件方法执行

      实例.$emit(名称,实参,实参,实参……)
      

      参数 与 $on的形参是一一对应的。

    注意

    虽然各个兄弟组件针对bus.js都有做引入,系统在运行的时候只有一个bus对象,故大哥 给 bus绑定的事件方法,兄弟组件可以通过bus调用。

    案例应用

    兄弟组件传值

    src/bus.js代码:

    // 快递员,负责兄弟组件之间传递数据
    import Vue from 'vue'
    // 导出一个Vue对象
    // 注意:这是一个新的对象,与main.js里边的没有关系
    export default new Vue()
    

    First.vue代码(created、$on设置事件方法,准备接受数据):

    <template>
        <div id="first">
          <h3>大哥组件</h3>
          <span>{{dt}}</span>
        </div>
    </template>
    
    <script>
    // 导入bus的模块对象
    import bus from '@/bus.js'
    
    export default {
      name: 'First',
      data () {
        return {
          dt: ''
        }
      },
      // 第一时间就把事件声明好,以便小弟调用并传递数据
      created () {
        // 实例对象.$on(事件名称,function(形参,形参){}事件事件的回调方法)
        // 注意:回调函数变为箭头函数,使得this可以正确使用
        bus.$on('jieshou', msg => {
          // console.log(msg)
          // 把数据给dt接收
          this.dt = msg
        })
      }
    }
    </script>
    

    Second.vue代码(bus调用$emit()调动事件进行数据传递):

    <template>
        <div id="second">
          <h3>小弟组件</h3>
          <button @click="back()">给大哥回话</button>
        </div>
    </template>
    
    <script>
    // 导入bus的模块对象
    import bus from '@/bus.js'
    
    export default {
      name: 'Second',
      methods: {
        // 给大哥组件传值
        back () {
          // 使得bus调用自己的事件(是大哥给bus声明的)
          // bus.$emit(事件,参数,参数)
          bus.$emit('jieshou', '1000元保护费')
        }
      }
    }
    </script>
    

    App.vue代码(引入、注册、使用各个兄弟组件):

    <template>
      <div id="app">
        <h2>App根组件</h2>
        <first></first>
        <second></second>
      </div>
    </template>
    
    <script>
    // 引入、注册、使用 两个兄弟组件
    import First from './components/First.vue'
    import Second from './components/Second.vue'
    
    export default {
      components: {
        First,
        Second
      }
    }
    </script>
    
    展开全文
  • 主要介绍了VUE兄弟组件传值操作,结合实例形式分析了VUE兄弟组件传值操作的原理、步骤、实现方法及相关注意事项,需要的朋友可以参考下
  • 父子组件中的传值 父向子 v-bind props <!-- 组件使用v-bind传值 --> <router :msg="msg"></router> 子组件: <p>子组件 ----- {{msg}}</p> props: ["msg"], //props接收 props:...

    父子组件中的传值 父向子 v-bind props

    <!-- 组件使用v-bind传值 -->
     <router :msg="msg"></router>
    
    子组件:
    <p>子组件 ----- {{msg}}</p> 
    
     props: ["msg"], //props接收
    

    props:验证

    props: {
        // fooA只接受数值类型的参数
        fooA: Number,
        // fooB可以接受字符串和数值类型的参数
        fooB: [String, Number],
        // fooC可以接受字符串类型的参数,并且这个参数必须传入
        msg: {
          type: String,
          required: true
        },
        // fooD接受数值类型的参数,如果不传入的话默认就是100
        fooD: {
          type: Number,
          default: 100
        },
        // fooE接受对象类型的参数
        fooE: {
          type: Object,
          // 当为对象类型设置默认值时必须使用函数返回
          default: function() {
            return { message: "Hello, world" };
          }
        },
        // fooF使用一个自定义的验证器
        fooF: {
          validator: function(value) {
            return value >= 0 && value <= 100;
          }
        },
      fooG: {
          type:Array,
          // 当为数组类型设置默认值时必须使用数组返回
          default: function() {
            return [];
          }
        },
    }
    

    props 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件修改父组件的状态。所以不应该在子组件中修改 props 中的值,Vue 警告。

    子向父 v-on $emit

    子组件:
    <button @click="cyy">按钮</button>
    methods: {
        cyy() {
          this.$emit("zifu", "子组件向父组件传值", true);
        }
      }
    
    父组件:
    <router  v-on:zifu="hehe"></router>
    methods: {
       hehe: function(data, data2) {
         console.log(data, data2);
       }
    }
    

    兄弟组件中的传值

    Bus中央事件总线

    在这里插入图片描述

    父组件组件代码:

    <div> //爸爸A
        <router></router>    //哥哥A1
        <vuex></vuex>    //弟弟A2
    </div>
    

    哥哥A1组件:

    <button @click="cyy">按钮</button> 点击按钮向弟弟A2传值脚本中:import Bus from "../api/Bus";   //注意引入
    export default {
      data() {
        return {
          a: 1
        };
      },
      methods: {
        cyy() {
          Bus.$emit("zifu", this.a++, "子组件向兄弟组件传值");    //存 Bus.$emit
        }
      }
    };
    

    弟弟A2组件:

    <p>接受兄弟A1传值=-------{{ccc}},{{ddd}}</p>脚本中:
    
    import Bus from "../api/Bus";
    export default {
      data() {
        return {
          ccc: "",
          ddd: ""
        };
      },
      created() {
        Bus.$on("zifu", (val, val1) => {    //取  Bus.$on
          this.ccc = val;
          this.ddd = val1;
        });
      }
    };
    
    展开全文
  • 组件往子组件里面传值: 1.在子组件中自定义可以接收的属性: <script> export default{ props:['name']//props:['name','age']可以传多个自定义属性 } </script> 2.在父组件中引用子组件 <...
  • 父组件向子组件传值 具体代码如下: 父 //父 <template> <div> <value-header :detail=detail></value-header> </div> </template> <script> import ValueHeader ...
  • vue 兄弟组件传值

    2019-10-21 14:30:07
    vue 兄弟组件传值
  • 创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值。 一,创建组件的方法 1.1.创建组件的方法有函数组件和类组件。 1.2.组建的使用。 引入组件 import 组件名 from './组件名' ...
  • 一、子向父组件传值方法一:父组件//方法parentFn(data1, data2, e) {// 按照参数排列 最后一个是eventconsole.log(data1, data2, e) //输出 1 2 event内容}//渲染render() {return (//子组件)}子组件// 渲染render()...
  • 创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值 1、react组件 1.1、创建组件的方法  1.1.1、函数组件  定义一个组件最简单的方式是使用JavaScript函数 function fn(props){...
  • vue-08-兄弟组件传值

    2020-04-22 19:42:45
    但是除了父子组件传值之外,还存在兄弟组件传值等情况。 兄弟组件传值:是使用发布对应模式解决组件间传值问题,叫总线机制,也叫Bus / 总线 / 发布订阅模式 / 观察者模式 1、新建一个js文件 :取名随意, 不过...

空空如也

空空如也

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

兄弟组件传值