精华内容
下载资源
问答
  • vue组件通信

    2021-06-07 22:00:54
    vue组件通信

    组件通信一般会有这几种情况

    1. 子 获取 父的数据
    1. 父组件通过在子组件绑定自定义属性的方式传递数据给子组件,子组件通过props声明自定义属性从而接收传过来的数据
    父组件中
    <my-son :msg="msg" :number="number" @add-number="add" @sub-number="sub"></my-son>
    
    my-son子组件中
    props: {
        msg: {
          type: String
        },
        number: {
          type: Number
        }
      }
    
    1. 子组件中通过this.$parent 获取父组件实例,从而在子组件中可以获得父组件的数据
    2. 父 获取 子的数据
    1. 子组件通过$ emit向外暴露一个自定义事件并且携带数据,父组件通过监听这个自定义事件通过事件对象($event)获取子组件传来的数据
    my-son子组件
    sub() {
          // 子组件传递参数,父组件通过$event 接收参数
          this.$emit('sub-number', 2)
        },
    
    父组件监听sub-number自定义事件
    <my-son :msg="msg" :number="number" @add-number="add" @sub-number="sub"></my-son>
    sub方法
    sub(e) {
          this.number -= e
        },
    
    1. 父组件通过this.$children获取子组件实例,从而在父组件中可以得到子组件的数据
    2. 给子组件设置ref,在父组件通过this.$refs.ref值 来获取子组件实例,从而获取子组件的数据
    3. 兄弟组件
    1. 创建一个空的vue实例对象叫做事件中心(eventCenter),在其中一个组件通过eventCenter.$emit()向外暴露一个自定义事件并携带数据,另外一个组件在mounted钩子函数监听这个自定义事件并触发回调函数拿到数据
    eventCenter.js
    import Vue from 'vue'
    const eventCenter = new Vue()
    export default eventCenter
    
    son.vue
    addCount() {
          // 兄弟组件之间传递数据的第二步: 其中一个兄弟组件通过$emit向外暴露一个自定义事件
          eventCenter.$emit('add-count', 1)
        }
    
    brother.vue
    mounted () {
      //  兄弟组件之间传递数据的第三步:在其中另一个兄弟组件上的 mounted钩子函数监听这个事件
        eventCenter.$on('add-count', (e) => {
          this.count += e
        })
      }
    
    4. 跨层组件
    1. vuex:所有组件共享数据
    2. provide/inject:依赖注入;父组件通过 provide 提供数据,后代组件通过inject接收数据;
    父组件
    methods: {
        text() {
          console.log('依赖注入provide/inject:父组件不需要知道哪些子组件用了这些数据')
          console.log('子组件不需要知道这些数据是从哪来的')
          console.log(this)
          console.log(this.count)
          this.count++
        }
      },
      provide() {
        return {
          info: this.msg,
          method: this.text
        }
      }
    
    后代组件
    inject: ['info', 'method'],
      methods: {
        click() {
          console.log(this.info)
          console.log(this.method)
          // 调用父组件的方法,并且是直接在 “ 父组件 ” 上触发的方法(即这个方法并不是此子组件调用的,真正的调用者是 “ 父组件 ” )
          // 因为 能直接更改 “  父组件 ” 的数据
          // 并且 method 方法输出的 this 就是提供数据的那个 “ 父组件 ”
          this.method()
        }
      }
    
    展开全文
  • vue 组件通信

    2019-09-23 23:59:23
    vue 组件通信

    vue 组件通信

    在这里插入图片描述

    展开全文
  • Vue组件通信

    2021-02-21 17:51:38
    文章目录Vue组件通信1.应用场景2.父向子通信示例一:更改引用组件中的普通属性数据示例二:更改引用组件中的数组对象数据3.子向父通信示例执行流程效果 Vue组件通信 1.应用场景 在我们日常开发过程中有很多页面都会...

    Vue组件通信

    1.应用场景

    在我们日常开发过程中有很多页面都会结合组件开发,以导航栏为例,可以在引用导航拦组件的时候进行进行组件通信,设置相应的参数得到相应的页面效果,达到灵活化开发的目的。

    2.父向子通信

    • 通过 Prop 向子组件传递数据

    • 语法:

    // 定义组件: 组件属性(定义父组件需要传递过来的属性)
    props : {
        // Prop属性名 : {type : "数据类型", required : 是否必须}
        title : {type : String, required : true}, 
        color : {type : String, required : false}
    }
    
    // 使用组件
    <组件名称 title="" color=""></组件名称>
    

    在这里插入图片描述

    示例一:更改引用组件中的普通属性数据

    • 示例代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vuejs父向子通信</title>
        <script src="../node_modules/vue/dist/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <!-- 使用组件 -->
        <my-div color="red" title="我是一个div"></my-div>
        <!-- 等价于
        <div style="color: red">我是一个div</div>
        -->
    </div>
    
    <script type="text/javascript">
        // 全局注册组件
        // Vue.component('my-div', {
        Vue.component('MyDiv', {
            template: `<div :style="'color:'+ color" >{{title}}</div>`,
            props: {
                color: {type: String, required: true, default: ""},
                title: {type: String, required: true}
            }
        });
        // 创建Vue实例
        var vue = new Vue({
            el: '#app', // 渲染的html元素
            data: { // 数据对象
    
            }
        });
    
    </script>
    </body>
    </html>
    
    • 运行效果
      在这里插入图片描述

    • 数据流转流程
      在这里插入图片描述

    示例二:更改引用组件中的数组对象数据

    • 示例代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vuejs父向子通信</title>
        <script src="../node_modules/vue/dist/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <!-- 使用组件 -->
        <my-ul :cities="dataList"></my-ul>
    </div>
    <script type="text/javascript">
        // 全局注册组件
        Vue.component("MyUl", {
            // 渲染模板
            template : `
                    <ul>
                        <li v-for="c in cities">{{c.name}}</li>
                    </ul>
                `,
            // 组件数据 (必须是一个函数)
            data : function () {
                return {
                }
            },
            // 组件属性(定义父组件需要传递过来的属性)
            props : {
                cities : {type : Array, required : true, default : []}
            }
        });
        // 创建Vue实例
        var vue = new Vue({
            el : '#app', // 渲染的html元素
            data : { // 数据对象
                dataList : [{id : 1, name : '广州市'},
                    {id : 2, name : '深圳市'},
                    {id : 3, name : '珠海市'},
                    {id : 4, name : '东莞市'}]
            }
        });
    </script>
    </body>
    </html>
    
    • 效果
      在这里插入图片描述

    3.子向父通信

    • 通过Vue实例$emit方法,触发当前实例上的事件方式向父组件传递数据

    • 语法:
      在这里插入图片描述

    示例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vuejs子向父通信</title>
        <script src="../node_modules/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 使用组件 -->
            <h3>结果: {{num}}</h3>
            <counter @xxx="calcNum"></counter>
        </div>
    
        <script type="text/javascript">
            // 全局注册组件
            Vue.component('counter', {
                template: `
                    <div>
                        <button @click="calc(1)">+</button>
                        <button @click="calc(2)">-</button>
                    </div>
                `,
                //方法
                methods: {
                    calc(flag){
                        //定义触发的事件
                        //参数1:事件名称(字母需要小写)
                        //参数2:参数
                        this.$emit("xxx",flag);
                    }
                }
            });
    
            // 创建Vue实例
            var vue = new Vue({
                el : '#app', // 渲染的html元素
                data : { // 数据对象
                   num: 1
                },
                methods:{
                    calcNum(flag){
                        flag == 1 ? this.num++ : this.num--;
                    }
                }
    
            });
        </script>
    </body>
    </html>
    

    执行流程

    在这里插入图片描述

    效果

    在这里插入图片描述

    Memorial Day is 509 days
    I miss you
    xiaokeai

    展开全文
  • VUE 组件通信

    2020-07-19 18:02:40
    vue组件通信包括:子组件和父组件、兄弟组件之间通信、模块之间通信 父子通信 v-bidn 是响应式的,可以做数据绑定 如果给子组件传一个字符串或则对象等一些基本数据类型的数据时,需要加上 v-bind 的缩写 : 来...
    • VUE中实现组件通信的方法有多种,eventvBusrefv-bind$emitVUEX ·····等等
    • vue组件通信包括:子组件和父组件、兄弟组件之间通信、模块之间通信

    父子通信


    • v-bidn 是响应式的,可以做数据绑定
    • 如果给子组件传一个字符串或则对象等一些基本数据类型的数据时,需要加上 v-bind 的缩写 : 来传递

    • 父组件代码
    <template>
       <sone  class="nkl_option1" v-for="(item,index) in option1" :key="index"></sone >
    </template>
    
    <script>
    import sone from '../sone.vue' //引入子组件模块
    export default{
       data(){
         return{
           item:[]
    	 }
       }
    }
    </script>
    
    • 子组件模块
    <template>
      <div></div>
    </template>
    
    <script>
      export default{
        props:{//用来接收父组件传过来的值
        	item:Object
         }
      }
    </script>
    

    子向父通信

    • vue 中子向父传递数据一般用 $emit 自定义事件来传递,在父组件中监听这个事件并在回调中写相关逻辑
    //父组件监听子组件定义的事件
    <父组件 :input="我是父组件" v-on:sone="click" />
    
    //子组件需要返回数据时执行,并可以传递数据
    this.$emit('sone',data)
    

    兄弟之间数据传递


    vue 中兄弟组件通信是很不方便的,或者说不支持,那么父组件中都有什么通信方式呢?

    • 路由URL参数:
    1. 在传统开发时我们经常把需要跨页面传递的数据放到 url 后面,跳转到另一个页面时直接获取 url 字符串获取想要的参数即可,在 vue 跨组件一样可以这么做
    //router index.js 动态路由
    {
       path:'/params/id',
       component: Params,
       name: 'Params'
    }
    
    <router-link :to="/params/12" >跳转路由</router-link>
    
    1. 在跳转后的组件中用 $route.params.id 去获取 id 参数为 12,但这个只适合传递比较小的数据,数字之类的

    • Bus通信
      在组件之外定义一个 bus.js 作为组件通信的桥梁,适合用于比较小型不需要 vuex 又需要组件通信的

    • 在 bus.js 中添加如下

    import VUe from 'vue'
    const eventBus = {}
    export eventBUs
    
    • 组件中调用 bus.js 通过自定义事件传递数据
      import Bus from './bus.js' 
      export default { 
          methods: {
             bus () {
                Bus.$emit('msg', '我要传给兄弟组件们')
             }
          }
      }
    
    • 兄弟组件中监听事件接收数据
        import Bus from './bus.js'
        export default {
            mounted() {
               Bus.$on('msg', (e) => {
                 console.log(e)
               })
             }
           }
    

    vuex


    vuex是vue的集中状态管理工具,对于大型应用统一集中管理数据,很方便,在此对vuex的用法并不过多介绍只是提一下使用过程中遇到的问题

    new Vue({
      // state
      data () {
        return {
          count: 0
        }
      },
      // view
      template: `
        <div>{{ count }}</div>
      `,
      // actions
      methods: {
        increment () {
          this.count++
        }
      }
    })
    

    Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

    如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。

    展开全文
  • VUE组件通信

    2020-07-19 20:03:49
    大家好 还是我 社会你戈 嘿嘿 几分钟不见想不想我啊 我为大家带来 VUE组件通信 希望大家能喜欢 嘿嘿 1父传子 我们在父组件中引入子组件 在components里面命名 然后写入子组件标签 传递一个参数 然后在子组件内通过...
  • Vue 组件通信

    2018-07-24 23:18:00
    今天学习了,vue组件通信本篇随笔主要对今天的学习成果进行总结。有什么不对的地方还望谅解! 首先,Vue的核心即组件化开发,所以组件通信就显得十分重要。 组件通讯包括:父子组件间的通信和兄弟组件间的通信。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,375
精华内容 4,150
关键字:

vue组件通信

vue 订阅