精华内容
下载资源
问答
  • 我也尽量找一些他们两个的异同点,除了多了一些辅助用的方法以外,最大的不同应该是对于组件间的通信,不仅有props,还有一种事件监听,也是可以通过组件传递的。 但是,在vue2.+中,vue引入了diff算法和虚拟dom来...
  • 较详细的给大家介绍了vue组件之间传值的方法,在 Vue 中,可以使用props向子组件传递数据。具体传递方法大家跟随脚本之家小编一起看看吧
  • 最近就有一些小伙伴问我,vue组件之间是如何传递参数的?其实vue是有三种方式可以组件之间传递数据(props,组件通信,slot),这次就说第一种方式如下: a父组件内容: 引入b子组件import b form ‘b.vue’
  • 主要介绍了Vue组件间数据传递的方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 本文实例分析了vue组件之间数据传递方法。分享给大家供大家参考,具体如下: 1、props:父组件 –>传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)...
  • 主要介绍了vue组件之间的数据传递方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 然鹅 在默认情况下 子组件中是无法访问到父组件中的data数据和methods中的方法的 父组件可在在引用的时候通过属性绑定(v-bind)的方式将将需要传递给子组件的数据传递给子组件 然后 在子组件中通过props属性进行定义...
  • Vue组件之间传递数据的五种方式_详解

    千次阅读 多人点赞 2020-04-04 18:29:32
    父组件向子组件传递数据,使用props属性;子组件向父组件中传递数据,在子组件中使用$emit派发事件,父组件中使用v-on 监听事件;缺点:组件嵌套层次多的话,传递数据比较麻烦。 祖先组件通过依赖注入(inject / ...

    Vue 组件之间数据传递的几种方式:

    1. 父组件向子组件传递数据,使用props属性;子组件向父组件中传递数据,在子组件中使用$emit派发事件,父组件中使用v-on 监听事件;缺点:组件嵌套层次多的话,传递数据比较麻烦。
    2. 祖先组件通过依赖注入(inject / provide)的方式,向其所有子孙后代传递数据;缺点:无法监听数据修改的来源,不支持响应式。
    3. 通过属性$root / $parent / $children / ref,访问根组件、父级组件、子组件中的数据;缺点:要求组件之间要有传递性。
    4. 通过事件总线(event bus)的方式,可以实现任意两个组件间进行数据传递;缺点:不支持响应式,这个概念是vue1.0版本中的,现在已经废弃。
    5. 通过 VueJs 的状态管理模式 Vuex,实现多个组件进行数据共享,推荐使用这种方式进行项目中各组件间的数据传递。

    下面详细介绍数据传递的几种方式:

    1. props/$emit

    prop 是在组件上注册的一些自定义的 attribute。就像下面的 :sub-num 。

    <div :sub-num="num"></div>
    

    1.1 父组件向子组件中传递数据

    • 一个组件默认可以拥有任意数量的 prop,任何值都可以传递给任何 prop。
    • 当一个值传递给一个 prop attribute 的时候,它就变成了那个组件实例的一个属性(例如下面的 subNum),通过属性名,我们就能够在组件实例中访问这个值。
    • 父组件向子组件中传递数据,可以在子组件中通过设置props属性来接收传递过来的数据
    <div id="app">
    	<div>{{num}}</div>
    	<!-- 将父组件中的num,传递给子组件中的sub-num -->
    	<blog-count :sub-num="num" :sub-user="user"></blog-count>
    </div>
    
    <script>
       const blogCount={
        	//子组件中通过props属性接收父组件传递过来的数据
           props:["subNum","subUser"],
           template:`<div>
                       <p>这是从父组件传进来的数字:{{subNum}}</p>
                       <p>这是从父组件传进来的对象:{{subUser.name}}-{{subUser.age}}</p>
                   </div>`,
          
       }
       var vm=new Vue({
           el:"#app",
           data:{
               num:2,
               user:{
                   name:"zhangsan",
                   age:18
               }
           },
           components:{
                blogCount
           }
       })
    </script>
    

    1.2 子组件向父组件传递数据

    • 子组件向父组件传递数据,通过 $emit派发事件,父组件中通过 v-on 接收该事件,拿到传递的数据
    • 语法:$emit(eventName,data),第一个参数为事件名称,需要跟父组件中 v-on 监听的事件名称一致;第二个参数为要传递的数据。
    <div id="app">
        <div>{{num}}</div>
        <!-- 通过 v-on 监听事件-->
        <blog-count @countchange="changeHandle"></blog-count>
    </div>
    
    <script>
        const blogCount={
            template:`<button @click="clickHandle">点击接收子组件传递过来的数据</button>`,
            data(){
                return {num:6}
            },
            methods: {
                clickHandle(){
                	//使用 $emit派发事件
                    this.$emit("countchange",this.num);
                }
            }
        }
        var vm=new Vue({
            el:"#app",
            data:{
                num:0
            },
            methods: {
                changeHandle(data){
                    this.num=data;
                }
            },
            components:{
                blogCount
            }
        })
    </script>
    

    1.3 .sync 修饰符

    如果使用 update:myPropName 的模式触发事件,上面的代码可以写成下面这样:

    <div id="app">
       <div>{{num}}</div>
        <blog-count :num="num" @update:countchange="num=$event"></blog-count>
        <!--最终可以简写为-->
        <!--  <blog-count :countchange.sync="num"></blog-count>  -->
    </div>
    
    <script>
    	const blogCount={
            template:`<button @click="$emit('update:countchange',num)">点击接收子组件传递过来的数据</button>`,
            data(){
                return {num:6}
            }
        })
        var vm=new Vue({
            el:"#app",
            data:{num:0}
        }
    </script>
    

    提取出组件的代码为:

    <blog-count :num="num" @update:countchange="num=$event"></blog-count>
    

    为了方便起见,我们为这种模式提供一个缩写,即 .sync 修饰符:

    <blog-count :countchange.sync="num"></blog-count>
    

    子组件向父组件传递数据,也可以通过使用 .sync 修饰符来完成。

    2. 依赖注入 provide inject

    • 这对选项是2.2.0版本新增的。需要一起使用,它允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
    • 主要解决了跨级组件间的通信问题。
    • 在祖先组件中增加属性 provide,它的属性值是一个对象或返回一个对象的函数。该对象包含了给子组件要传递的数据。
    • 在子组件中增加属性 inject ,用来接收数据,它的选项是一个字符串数组,或一个对象。
    <div id="app">
        <div>{{num}}</div>
        <blog-count></blog-count>
    </div>
    
    <script>
        const blogCount={
        	//子组件中使用inject属性来接收数据
            inject:["num"],
            template:`<div>{{num}}</div>`
        }
        var vm=new Vue({
            el:"#app",
            data:{
                num:10
            },
            //父组件中使用provide属性存放要传递的数据
            provide:function(){
                return {
                    num:this.num
                }
            },
            components:{
                blogCount
            }
        })
    </script>
    

    依赖注入 provide inject,这种方式的缺点

    • 祖先组件不需要知道哪些后代组件使用它提供的属性。
    • 后代组件不需要知道被注入的属性来自哪里。
    • 会将应用程序中的组件与它们当前的组织方式耦合起来,使重构变得更加困难。
    • 所提供的属性是非响应式的。

    3. $root / $parent / $children / ref

    • 通过 $root 属性访问根实例 new Vue()。
    • 通过$parent 属性访问父组件的实例。
    • 通过$children 属性访问当前实例的直接子组件。需要注意 $children 并不保证顺序,也不是响应式的。
    • 通过 $refs 属性访问子组件中的数据,子组件标签上加 ref 的属性。例如在子组件的dom元素上增加属性 ref = "abc",就可以使用this.$refs.abc 拿到这个子组件的实例。
    • ref,如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例。
    • $refs 只会在组件渲染完成之后生效,并且它们不是响应式的。
    <div id="app">
        <blog-count></blog-count>
    </div>
    
    <script>
        const blogItem={
            template:`<div>{{$root.num}}-{{$parent.num}}</div>`,
            data(){
                return {
                    num:3
                }
            },
            mounted() {
            	//访问根实例中的数据
                console.log("Vue.num:"+this.$root.num);
                //访问父级组件中的数据
                console.log("blogCount.num:"+this.$parent.num);
                //调用父级组件中的方法
                this.$parent.start()
            },
        }
        const blogCount={
            template:`<div><blogItem ref="refItem"></blogItem></div>`,
            data(){
                return {num:6}
            },
            components:{
                blogItem
            },
            methods: {
                start(){
                    console.log("blogCount start...");
                    console.log(this.$children[0].num)
                }
            },
            mounted() {
            	//访问子组件的实例
                console.log(this.$refs.refItem.num);
            },
        }
        var vm=new Vue({
            el:"#app",
            data:{
                num:0
            },
            components:{
                blogCount
            }
        })
    </script>
    

    4. event bus 事件总线

    事件的触发器,vue 1.0版本使用比较多,现在已经不用。

    这种方法可以看作是通过一个空的实例 new Vue()作为事件总线(事件中心),用它来派发和监听事件,可以实现任何组件间的通信,包括父子、兄弟、跨级。缺点:这种传递数据的方式不是响应式。

    <div id="app">
        <div>{{num}}</div>
        <blog-count></blog-count>
        <button @click="clickHandle">send</button>
    </div>
    
    <script>
    	//创建一个空的vue实例
        const eventbus=new Vue();
    	//子组件
        const blogCount={
            data(){
                return {num:1}
            },
            template:`<div>{{num}}</div>`,
            mounted() {
            	//监听事件
                eventbus.$on("message",(msg)=>{
                    this.num=msg;
                })
            }
        }
        var vm=new Vue({
            el:"#app",
            data:{
                num:10
            },
            components:{
                blogCount
            },
            methods: {
                clickHandle(){
                	//派发事件
                    eventbus.$emit('message',this.num)
                }
            }
        })
    </script>
    

    5. vuex

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它的状态存储是响应式的。采用集中式存储管理应用的所有组件的状态,也就是说,对数据的所有操作都要在vuex中进行。

    5.1 vuex 原理

    vuex 实现了一个单向数据流,在全局拥有一个 State 用来存放数据,当组件用同步的方式更改 State 中的数据时,必须通过 Mutation 进行。当使用异步方式(例如 ajax请求)修改数据,必须先经过 Actions ,再由 Actions 经过 Mutation来操作。
    vuex

    5.2 store

    每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。

    const store = new Vuex.Store({
    	state: {
    		//相当于自定义组件中的data
    	},
    	getters:{
    		//相当于自定义组件中的computed
    	},
    	mutations: {
    		//相当于自定义组件中的methods,只能做同步的操作
    		//对state中的数据进行修改
    	},
    	actions: {
    		//异步操作,例如ajax请求
    		//使用commit 触发 mutations
    	}
    })
    

    5.3 vuex的核心概念

    5.3.1 State

    • State相当于自定义组件中的data,用来存放数据,页面中所有的数据都是从该对象中进行读取。
    • 在组件中使用 store.state / this.$store.state 来读取vuex中的数据。
    //创建 vuex 实例
    const store = new Vuex.Store({
    	state: {
    		count:3
    	}
    }
    //创建 vue 实例
    const app = new Vue({
    	el: '#app',
    	store,
    	components: { Counter },
    	template: `<div class="app"><counter></counter></div>`
    })
    //自定义组件
    const Counter = {
      template: `<div>{{ count }}</div>`,
      computed: {
        count () {
          return this.$store.state.count
        }
      }
    }
    

    5.3.2 getter

    • getter 相当于自定义组件中的computed,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
    • Getter 接受 state 作为其第一个参数,也可以接受其他 getter 作为第二个参数。
    • 可以使用 store.getters / this.$store.getters 访问这些值。
    const store = new Vuex.Store({
    	state: {
    		sourceList:[],
            pageNo:1,
            pageSize:5,
    	},
    	getters: {
    		dataList:(state)=>{
               //计算分页后的数据
                let start=(state.pageNo-1)*state.pageSize;
                let end=start+state.pageSize;
                let result=state.sourceList.slice(start,end);
                return result;
            },
            pages:(state,getters)=>{
                //计算页码的范围
                return Math.ceil(getters.dataList.length/state.pageSize);
            }
    	}
    })
    

    5.3.3 Mutation

    • mutation 相当于自定义组件中的methods。
    • mutation是更改 Vuex 的 State 中数据的唯一方法
    • 通过 store.commit(type,data)调用 mutation,第一个参数为事件类型,需要和mutation中函数名称一致;第二个参数为要传递的参数。
    • mutation中的函数接受 state 作为其第一个参数。
    const store = new Vuex.Store({
    	state: {
    	  count: 1
    	},
    	mutations: {
    	  increment (state) {
    	    // 变更状态
    	    state.count++
    	  }
    	}
    })
    
    const vm = new Vue(){
    	methods:{
    		change(){
    			store.commit("increment");
    		}
    }
    

    5.3.4 Action

    • action 主要用来操作所有的异步请求。
    • action 不能直接对State 中的数据进行操作,只能通过commit(type,data) 方法调用 mutation。
    • action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。
    • 通过 store.dispatch(type)方法触发action,参数为事件类型,需要和action中函数名称一致。
    const store = new Vuex.Store({
    	state: {
    		dataList:[]
    	},
    	mutations: {
    		render(state,data){
    			state.dataList=data;
    		},
    	},
    	actions: {
    		getData({commit}){
    			fetch("./data.json").then((res)=>res.json()).then((res)=>{
    				  commit("render",res.data);
    			})
    		}
    	}
    })
    const vm = new Vue(){
    	created(){
    		store.dispatch("getData");
    	}
    }
    

    总结:

    • 父组件和子组件间通信:
      • 父向子传递数据是通过props,子向父传递数据是通过event($emit);
      • 通过父链/子链进行数据传递($parent / $children);
      • 通过 ref 也可以访问组件实例;
      • 依赖注入:provide / inject;
    • 兄弟组件间通信:
      • event bus
      • Vuex
    • 跨级组件间通信:
      • event bus;
      • Vuex;
      • 依赖注入:provide / inject;
    展开全文
  • 本篇文章主要介绍了vue 组件之间使用eventbus传值。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的...下面这篇文章主要给大家介绍了关于vue中各组件之间传递数据的方法示例,需要的朋友可以参考学习。
  • Vue组件之间传递数据的五种方式

    千次阅读 2020-11-09 23:05:29
    父组件向子组件传递数据,使用props属性;子组件向父组件中传递数据,在子组件中使用$emit派发事件,父组件中使用v-on 监听事件;缺点:组件嵌套层次多的话,传递数据比较麻烦。 祖先组件通过依赖注入(inject / ...

    Vue 组件之间数据传递的几种方式:

    1. 父组件向子组件传递数据,使用props属性;子组件向父组件中传递数据,在子组件中使用$emit派发事件,父组件中使用v-on
      监听事件;缺点:组件嵌套层次多的话,传递数据比较麻烦。
    2. 祖先组件通过依赖注入(inject / provide)的方式,向其所有子孙后代传递数据;缺点:无法监听数据修改的来源,不支持响应式。
    3. 通过属性$root / $parent / $children /
      ref,访问根组件、父级组件、子组件中的数据;缺点:要求组件之间要有传递性。
    4. 通过事件总线(event
      bus)的方式,可以实现任意两个组件间进行数据传递;缺点:不支持响应式,这个概念是vue1.0版本中的,现在已经废弃。
    5. 通过 VueJs 的状态管理模式 Vuex,实现多个组件进行数据共享,推荐使用这种方式进行项目中各组件间的数据传递。
      下面详细介绍数据传递的几种方式:

    1.props/$emit

    prop 是在组件上注册的一些自定义的 attribute。就像下面的 :sub-num 。

    <div :sub-num="num"></div>
    

    1.1 父组件向子组件中传递数据

    1、一个组件默认可以拥有任意数量的 prop,任何值都可以传递给任何 prop。
    2、当一个值传递给一个 prop attribute 的时候,它就变成了那个组件实例的一个属性(例如下面的 subNum),通过属性名,我们就能够在组件实例中访问这个值。
    父组件向子组件中传递数据,可以在子组件中通过设置props属性来接收传递过来的数据。

    <div id="app">
    	<div>{{num}}</div>
    	<!-- 将父组件中的num,传递给子组件中的sub-num -->
    	<blog-count :sub-num="num" :sub-user="user"></blog-count>
    </div>
    
    <script>
       const blogCount={
        	//子组件中通过props属性接收父组件传递过来的数据
           props:["subNum","subUser"],
           template:`<div>
                       <p>这是从父组件传进来的数字:{{subNum}}</p>
                       <p>这是从父组件传进来的对象:{{subUser.name}}-{{subUser.age}}</p>
                   </div>`,
          
       }
       var vm=new Vue({
           el:"#app",
           data:{
               num:2,
               user:{
                   name:"zhangsan",
                   age:18
               }
           },
           components:{
                blogCount
           }
       })
    </script>
    

    1.2 子组件向父组件传递数据

    子组件向父组件传递数据,通过 $emit派发事件,父组件中通过 v-on 接收该事件,拿到传递的数据。

    语法:$emit(eventName,data),第一个参数为事件名称,需要跟父组件中 v-on 监听的事件名称一致;第二个参数为要传递的数据。

    <div id="app">
        <div>{{num}}</div>
        <!-- 通过 v-on 监听事件-->
        <blog-count @countchange="changeHandle"></blog-count>
    </div>
    
    <script>
        const blogCount={
            template:`<button @click="clickHandle">点击接收子组件传递过来的数据</button>`,
            data(){
                return {num:6}
            },
            methods: {
                clickHandle(){
                	//使用 $emit派发事件
                    this.$emit("countchange",this.num);
                }
            }
        }
        var vm=new Vue({
            el:"#app",
            data:{
                num:0
            },
            methods: {
                changeHandle(data){
                    this.num=data;
                }
            },
            components:{
                blogCount
            }
        })
    </script>
    

    1.3 .sync 修饰符

    如果使用 update:myPropName 的模式触发事件,上面的代码可以写成下面这样:

    <div id="app">
       <div>{{num}}</div>
        <blog-count :num="num" @update:countchange="num=$event"></blog-count>
        <!--最终可以简写为-->
        <!--  <blog-count :countchange.sync="num"></blog-count>  -->
    </div>
    
    <script>
    	const blogCount={
            template:`<button @click="$emit('update:countchange',num)">点击接收子组件传递过来的数据</button>`,
            data(){
                return {num:6}
            }
        })
        var vm=new Vue({
            el:"#app",
            data:{num:0}
        }
    </script>
    

    提取出组件的代码为:

    <blog-count :num="num" @update:countchange="num=$event"></blog-count>```
    为了方便起见,我们为这种模式提供一个缩写,即 .sync 修饰符:
    
    ```javascript
    <blog-count :countchange.sync="num"></blog-count>
    

    子组件向父组件传递数据,也可以通过使用 .sync 修饰符来完成。

    2. 依赖注入 provide inject

    1. 这对选项是2.2.0版本新增的。需要一起使用,它允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
    2. 主要解决了跨级组件间的通信问题。
    3. 在祖先组件中增加属性 provide,它的属性值是一个对象或返回一个对象的函数。该对象包含了给子组件要传递的数据。
    4. 在子组件中增加属性 inject ,用来接收数据,它的选项是一个字符串数组,或一个对象。
    <div id="app">
        <div>{{num}}</div>
        <blog-count></blog-count>
    </div>
    
    <script>
        const blogCount={
        	//子组件中使用inject属性来接收数据
            inject:["num"],
            template:`<div>{{num}}</div>`
        }
        var vm=new Vue({
            el:"#app",
            data:{
                num:10
            },
            //父组件中使用provide属性存放要传递的数据
            provide:function(){
                return {
                    num:this.num
                }
            },
            components:{
                blogCount
            }
        })
    </script>
    

    依赖注入 provide inject,这种方式的缺点:

    1. 祖先组件不需要知道哪些后代组件使用它提供的属性。
    2. 后代组件不需要知道被注入的属性来自哪里。
    3. 会将应用程序中的组件与它们当前的组织方式耦合起来,使重构变得更加困难。
    4. 所提供的属性是非响应式的。

    3. $root / $parent / $children / ref

    1. 通过 $root 属性访问根实例 new Vue()。
    2. 通过$parent 属性访问父组件的实例。
    3. 通过$children 属性访问当前实例的直接子组件。需要注意 $children 并不保证顺序,也不是响应式的。
    4. 通过 r e f s 属 性 访 问 子 组 件 中 的 数 据 , 子 组 件 标 签 上 加 r e f 的 属 性 。 例 如 在 子 组 件 的 d o m 元 素 上 增 加 属 性 r e f = " a b c " , 就 可 以 使 用 t h i s . refs 属性访问子组件中的数据,子组件标签上加 ref 的属性。例如在子组件的dom元素上增加属性 ref = "abc",就可以使用this. refs访refdomref="abc"使this.refs.abc 拿到这个子组件的实例。
    5. ref,如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例。
    6. $refs 只会在组件渲染完成之后生效,并且它们不是响应式的。
    <div id="app">
        <blog-count></blog-count>
    </div>
    
    <script>
        const blogItem={
            template:`<div>{{$root.num}}-{{$parent.num}}</div>`,
            data(){
                return {
                    num:3
                }
            },
            mounted() {
            	//访问根实例中的数据
                console.log("Vue.num:"+this.$root.num);
                //访问父级组件中的数据
                console.log("blogCount.num:"+this.$parent.num);
                //调用父级组件中的方法
                this.$parent.start()
            },
        }
        const blogCount={
            template:`<div><blogItem ref="refItem"></blogItem></div>`,
            data(){
                return {num:6}
            },
            components:{
                blogItem
            },
            methods: {
                start(){
                    console.log("blogCount start...");
                    console.log(this.$children[0].num)
                }
            },
            mounted() {
            	//访问子组件的实例
                console.log(this.$refs.refItem.num);
            },
        }
        var vm=new Vue({
            el:"#app",
            data:{
                num:0
            },
            components:{
                blogCount
            }
        })
    </script>
    

    4. event bus 事件总线

    事件的触发器,vue 1.0版本使用比较多,现在已经不用。

    这种方法可以看作是通过一个空的实例 new Vue()作为事件总线(事件中心),用它来派发和监听事件,可以实现任何组件间的通信,包括父子、兄弟、跨级。缺点:这种传递数据的方式不是响应式。

    <div id="app">
        <div>{{num}}</div>
        <blog-count></blog-count>
        <button @click="clickHandle">send</button>
    </div>
    
    <script>
    	//创建一个空的vue实例
        const eventbus=new Vue();
    	//子组件
        const blogCount={
            data(){
                return {num:1}
            },
            template:`<div>{{num}}</div>`,
            mounted() {
            	//监听事件
                eventbus.$on("message",(msg)=>{
                    this.num=msg;
                })
            }
        }
        var vm=new Vue({
            el:"#app",
            data:{
                num:10
            },
            components:{
                blogCount
            },
            methods: {
                clickHandle(){
                	//派发事件
                    eventbus.$emit('message',this.num)
                }
            }
        })
    </script>
    

    5. vuex

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它的状态存储是响应式的。采用集中式存储管理应用的所有组件的状态,也就是说,对数据的所有操作都要在vuex中进行。

    5.1 vuex 原理

    vuex 实现了一个单向数据流,在全局拥有一个 State 用来存放数据,当组件用同步的方式更改 State 中的数据时,必须通过 Mutation 进行。当使用异步方式(例如 ajax请求)修改数据,必须先经过 Actions ,再由 Actions 经过 Mutation来操作。

    在这里插入图片描述

    5.2 store

    每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。

    const store = new Vuex.Store({
    	state: {
    		//相当于自定义组件中的data
    	},
    	getters:{
    		//相当于自定义组件中的computed
    	},
    	mutations: {
    		//相当于自定义组件中的methods,只能做同步的操作
    		//对state中的数据进行修改
    	},
    	actions: {
    		//异步操作,例如ajax请求
    		//使用commit 触发 mutations
    	}
    })
    
    

    5.3 vuex的核心概念

    5.3.1 State

    1. State相当于自定义组件中的data,用来存放数据,页面中所有的数据都是从该对象中进行读取。
    2. 在组件中使用 store.state / this.$store.state 来读取vuex中的数据。
    //创建 vuex 实例
    const store = new Vuex.Store({
    	state: {
    		count:3
    	}
    }
    //创建 vue 实例
    const app = new Vue({
    	el: '#app',
    	store,
    	components: { Counter },
    	template: `<div class="app"><counter></counter></div>`
    })
    //自定义组件
    const Counter = {
      template: `<div>{{ count }}</div>`,
      computed: {
        count () {
          return this.$store.state.count
        }
      }
    }
    
    

    5.3.2 getter

    1. getter 相当于自定义组件中的computed,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
    2. Getter 接受 state 作为其第一个参数,也可以接受其他 getter 作为第二个参数。
    3. 可以使用 store.getters / this.$store.getters 访问这些值。
    const store = new Vuex.Store({
    	state: {
    		sourceList:[],
            pageNo:1,
            pageSize:5,
    	},
    	getters: {
    		dataList:(state)=>{
               //计算分页后的数据
                let start=(state.pageNo-1)*state.pageSize;
                let end=start+state.pageSize;
                let result=state.sourceList.slice(start,end);
                return result;
            },
            pages:(state,getters)=>{
                //计算页码的范围
                return Math.ceil(getters.dataList.length/state.pageSize);
            }
    	}
    })
    
    

    5.3.3 Mutation

    1. mutation 相当于自定义组件中的methods。
    2. mutation是更改 Vuex 的 State 中数据的唯一方法。
    3. 通过 store.commit(type,data)调用 mutation,第一个参数为事件类型,需要和mutation中函数名称一致;第二个参数为要传递的参数。
    4. mutation中的函数接受 state 作为其第一个参数。
    const store = new Vuex.Store({
    	state: {
    	  count: 1
    	},
    	mutations: {
    	  increment (state) {
    	    // 变更状态
    	    state.count++
    	  }
    	}
    })
    
    const vm = new Vue(){
    	methods:{
    		change(){
    			store.commit("increment");
    		}
    }
    
    

    5.3.4 Action

    1. action 主要用来操作所有的异步请求。
    2. action 不能直接对State 中的数据进行操作,只能通过commit(type,data) 方法调用 mutation。
    3. action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。
    4. 通过 store.dispatch(type)方法触发action,参数为事件类型,需要和action中函数名称一致。
    const store = new Vuex.Store({
    	state: {
    		dataList:[]
    	},
    	mutations: {
    		render(state,data){
    			state.dataList=data;
    		},
    	},
    	actions: {
    		getData({commit}){
    			fetch("./data.json").then((res)=>res.json()).then((res)=>{
    				  commit("render",res.data);
    			})
    **加粗样式**		}
    	}
    })
    const vm = new Vue(){
    	created(){
    		store.dispatch("getData");
    	}
    }
    
    

    总结:

    父组件和子组件间通信:

    1. 父向子传递数据是通过props,子向父传递数据是通过event($emit);
    2. 通过父链/子链进行数据传递($parent / $children);
    3. 通过 ref 也可以访问组件实例;
    4. 依赖注入:provide / inject;
      兄弟组件间通信:
    5. event bus
    6. Vuex
      跨级组件间通信:
    7. event bus;
    8. Vuex;
    9. 依赖注入:provide / inject;
    展开全文
  • 主要介绍了Vue2.0父子组件传递函数的教程详解,需要的朋友可以参考下
  • Vue中,我们使用props向子组件传递数据 父组件中: var vm = new Vue({ el: '#app', data: { msg: '我是父组件 ' }, methods: { } }); 子组件中: 在使用组件的时候,使用v-bind属性将mymsg的值绑定为父...

    父组件向子组件传值

    在Vue中,我们使用props向子组件传递数据
    父组件:

    var vm = new Vue({
        el: '#app',
            data: {
                msg: '我是父组件 '
            },
            methods: {
            }
        });
    

    子组件:
    在使用子组件的时候,使用v-bind属性将mymsg的值绑定为父组件中定义的变量msg。

    <com1 v-bind:mymsg='msg'></com1>
    

    在定义子组件的时候,使用props接收父组件传递过来的值。在props中添加了元素之后,就可以直接使用,就不需要再去data中定义变量了。

     Vue.component('com1', {
          props: [ 'mymsg'], 
          template: `<div>  我是子组件com1          
          <h1>这是父组件传递过来的值:{{mymsg}}</h1>
          </div>`,
          data() {
              return {}
          }
      });
    

    子组件向父组件传值

    子组件主要是通过事件传递给父组件
    子组件:
    点击按钮调用send方法,通过this.$emit方法向父组件发送自定义方法,并且把值带过去,方法里面的第一个参数是自定义方法名,第二个参数是需要传递的值。

    Vue.components('son', {
        data() {
              return {
                  msg: '我是子组件',
                  sonMsg: '我是准备传给父组件的值'
              }
          },
          template: "#son",
          methods: {
              send() {
                  this.$emit('tofather', this.sonMsg)
              }
          }
      })
    

    在使用子组件的时候,触发这个tofather自定义方法。

    <son  @tofather='recivefather'  ></son>
    

    父组件:
    用tofather事件调用recivefather方法,获取到从子组件传递过来的参数,参数val即为传递过来的数据。

    var vm = new Vue({
          el: '#app',
          data: {
              msg: 'vue',
              reciveSon:'',
          },
          methods: {
              recivefather(val) {
                   this.reciveSon=val
              }
          }
      });
    

    子组件向子组件传值

    兄弟组件之间的传值,需要借助事件中心,通过事件中心传递数据。

     // 提供事件中心
     var eventBus = new Vue();
    

    传递数据方,通过一个按钮点击事件,触发eventBus.$emit方法传递数据,第一个参数为方法名,第二个参数为传递的参数。

    methods: {
       sendto2() {
           		 eventBus.$emit('tocom2', this.msg1)
         }
     },
    

    接收数据方,通过mounted(){}钩子中,触发eventBus.$on方法接收数据,val即为传递过来的参数。

    mounted() {
     	eventBus.$on('tocom2', (val) => {
            this.message2 = val
        })
    },
    
    展开全文
  • **解决的问题:** 使用$attrs和$listeners实现祖孙组件之间的数据传递,也就是...--这里 :one和:two是向后代组件传递数据--> <child1 xss=removed two=child2 test1=onTest1 test2=onTest2></child1> </tem
  • vue组件之间传递数组

    千次阅读 2020-05-14 11:34:35
    * let InFo = JSON.stringify(arr) localStorage.setItem('array',InFo); 通过 JSON.stringify 将数组解析成字符串 let Info = JSON.parse(localStorage.getItem('array')); 通过**JSON.parse**将字符串还原成数组

    在这里插入图片描述*
    let InFo = JSON.stringify(arr)
    localStorage.setItem('array',InFo);
    通过 JSON.stringify 将数组解析成字符串
    在这里插入图片描述
    let Info = JSON.parse(localStorage.getItem('array'));
    通过**JSON.parse**将字符串还原成数组

    展开全文
  • 方法可在所有组件传递数据。 2.建立Vue 实例模块传递数据。 Vue 实例模块会成为共用的事件触发器。 其通过事件传递的信息不回被公有化。 3.建立事件链传递数据。 一个兄弟组件通过事件将信息传给兄弟组件共有的...
  • 下面小编就为大家分享一篇vue父组件向子组件传递多个数据的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue组件之间的三种数据传递方式

    千次阅读 2018-08-16 10:07:00
    Vue组件之间有三种数据传递方式:Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。 1.props:子组件的模板内并不能直接使用父组件的...
  • 本篇文章主要介绍了vue.js组件之间传递数据的方法组件实例的作用域是相互独立的,如何传递数据也成了组件的重要知识点之一,有兴趣的可以了解一下
  • 主要介绍了vue组件数据传递、父子组件数据获取,slot,router路由功能,结合实例形式分析了vue.js组件数据传递、路由相关概念、原理及相关操作技巧,需要的朋友可以参考下
  • 父子组件之间的数据关系,我这边将情况具体分成下面4种: 父组件修改子组件的data,并实时更新 子组件通过$emit传递组件的数据,this.$data指当前组件的data(return{…})里的所有数据, this.$emit('data',this.$...
  • 主要介绍了vue组件中使用props传递数据的实例详解,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 关于父子组件之间传递数据其实文档上都说得很明白。  但是如果完全不懂的人做计也看不懂,下面是一个小例子,有两个文件 1.parent.vue <child child-msg=msg ok=event></child> [removed] import child from '....
  • VUE组件之间传值,总结来讲有三种情况,分别是:父组件对子组件、子组件对父组件以及兄弟组件之间传值以及调用。 一、父组件==&amp;gt;子组件 1.父组件传值给子组件,通过类似于属性绑定的方式,将需要传入...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 63,563
精华内容 25,425
关键字:

vue组件之间传递方法

vue 订阅