精华内容
下载资源
问答
  • 主要介绍了vue组件数据传递、父子组件数据获取,slot,router路由功能,结合实例形式分析了vue.js组件数据传递、路由相关概念、原理及相关操作技巧,需要的朋友可以参考下
  • 本篇文章主要介绍了vue组件Prop传递数据的实现示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue组件数据传递:父组件数据传递给子组件,常用的props方法进行传递;并给出两个方法以解决传递时的单向数据流问题
  • 主要介绍了vue组件之间数据传递的方法,结合实例形式分析了vue.js父组件与子组件之间数据传递相关操作技巧,需要的朋友可以参考下
  • 主要介绍了Vue组件数据传递问题及需要注意事项,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue组件Prop传递数据

    2020-06-13 22:43:18
    组件实例的作用域是孤立的,这就意味着不能在子组件的模板内直接使用父组件数据,要让子组件使用父组件数据,我们需要通过Props选项。 Prop 1、Prop是单向绑定的,也就是说当父属性的值发生变化时,将传递给子...

    组件实例的作用域是孤立的,这就意味着不能在子组件的模板内直接使用父组件的数据,要让子组件使用父组件的数据,我们需要通过Props选项。

    Prop

    1、Prop是单向绑定的,也就是说当父属性的值发生变化时,将传递给子组件,但是不会反过来;
    2、每次父组件更新时,子组件的所有 prop 都会更新为最新值。

    <ul>
        <!-- 在这里使用我们刚才定义的组件 -->
        <todo-item
        v-for="(item,index) of list"
        :key="index"
        //把item的值赋值给component
        :content="item"
        >
    </todo-item>
    </ul>
    

    我们父组件中属性要想在我们子组件中使用,需要用到prop属性进行传递

      Vue.component('todo-item',{
            // template为我们组件的模板
            props: ['content'],
            template:'<li>{{content}}</li>'
        }
    

    完整联系代码:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>vue入门</title>
      <script src="./vue.js"></script>
    </head>
    <body>
    <div id="root">
        <!--  -->
        <div>
        <input v-model="inputValue"/>
        <button @click="submit">提交</button>
    </div>
         <!--循环取出item里面的值 -->
    <!-- <ul>
        <li v-for="(item,index) of list" :key="index">
       
            {{item}}
        </li>
    </ul> -->
    <ul>
        <!-- 在这里使用我们刚才定义的组件 -->
        <todo-item
        v-for="(item,index) of list"
        :key="index"
        :content="item"
        >
    </todo-item>
    </ul>
    </div>
    
    <!-- 在body里面加一个<script>标签我们去创建一个vue的实例 -->
    
    <script>
        // 这里我们去自定义一个组件内容(全局组件)
        Vue.component('todo-item',{
            // template为我们组件的模板
            props: ['content'],
            template:'<li>{{content}}</li>'
        }
    
        )
        new  Vue({
            el:"#root",//el:大意是我让vue这个实例去接管页面上哪个元素(vue实例去和哪个dom节点做绑定)
            data:{
            show:true,
            inputValue:"",
            list:[]
            },
            methods: {
                submit:function(){
                    //当我们按下提交按钮时,要往数据里增加一个数据
                    this.list.push(this.inputValue),
                    this.inputValue=""
                }
            }
    
        })   
    </script>
    </body>
    </html>
    

    原文链接:https://www.cnblogs.com/dyfbk/p/6872475.html

    展开全文
  • 主要介绍了vue组件中的数据传递方法,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
  • Vue组件之间传递数据的五种方式

    千次阅读 2020-11-09 23:05:29
    Vue 组件之间数据传递的几种方式: 父组件向子组件传递数据,使用props属性;子组件向父组件中传递数据,在子组件中使用$emit派发事件,父组件中使用v-on 监听事件;缺点:组件嵌套层次多的话,传递数据比较麻烦。 ...

    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;
    展开全文
  • 今天小编就为大家分享一篇vue兄弟组件传递数据的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了Vue组件数据传递的方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 今天小编就为大家分享一篇关于vue中子组件传递数据给父组件的讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
  • Vue组件之间传递数据的五种方式_详解

    千次阅读 多人点赞 2020-04-04 18:29:32
    Vue 组件之间数据传递的几种方式: 父组件向子组件传递数据,使用props属性;子组件向父组件中传递数据,在子组件中使用$emit派发事件,父组件中使用v-on 监听事件;缺点:组件嵌套层次多的话,传递数据比较麻烦。 ...

    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组件之间的数据传递方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 本篇文章主要介绍了Vue2.0组件数据传递示例,组件数据传递主要是父子组件之间传递,具有一定的参考价值,有兴趣的可以了解一下。
  • vue组件数据传递: 1.父组件传递给子组件:在父组件引用的子组件标签上增加属性就可以传递,子组件在props: {父子间属性名称:数据类型}中接收 2.子组件监听父组件方法 ,使用this.$emit()触发父组件属性 代码...

    vue组件数据传递:

    1.父组件传递给子组件:在父组件引用的子组件标签上增加属性就可以传递,子组件在props: {父子间属性名称:数据类型}中接收

    2.子组件监听父组件方法 ,使用this.$emit()触发父组件属性

     

    代码示例:

    父组件

    主要看<city-alphabet>子组件标签内容,

    :cities='' cities''为传递cities数据给子组件,

    @change="handleLetterChange"为子组件监听的属性触发 handleLetterChange()方法

    <template>
      <div>
        <city-header></city-header>
        <city-search></city-search>
        <city-list
          :hot="hotCities"
          :cities="cities"
          :letter="letter"
        ></city-list>
        <city-alphabet
          :cities="cities"
          @change="handleLetterChange"
        ></city-alphabet>
      </div>
    </template>
    
    <script>
    import CityHeader from './components/Header'
    import CitySearch from './components/Search'
    import CityList from './components/List'
    import CityAlphabet from './components/Alphabet'
    import axios from 'axios'
    export default {
      name: 'city',
      components: {
        CityHeader,
        CitySearch,
        CityList,
        CityAlphabet
      },
      data() {
        return {
          hotCities: [],
          cities: {},
          letter: ''
        }
      },
      mounted() {
        this.getCityInfo()
      },
      methods: {
        getCityInfo() {
          axios.get('/api/city.json')
            .then(this.getCityInfoSucc)
        },
        getCityInfoSucc(res) {
          res = res.data
          if (res.ret && res.data) {
            const data = res.data
            this.hotCities = data.hotCities
            this.cities = data.cities
          }
        },
        handleLetterChange(letter) {
          this.letter = letter
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>
    

    子组件:

    对应父组件<city-alphabet>标签

    this.$emit('change', this.letters[index])为监听父组件change,并传参数

    <template>
      <ul class="list">
        <li
          class="item"
          v-for="item of letters"
          :key="item"
          :ref="item"
          @touchstart="handleTouchStart"
          @touchmove="handleTouchMove"
          @touchend="handleTouchEnd"
          @click="handleLetterClick"
        >{{item}}</li>
      </ul>
    </template>
    
    <script>
      export default {
        name: "CityAlphabet",
        props: {
          cities: Object
        },
        computed: {
          letters() {
            const letters = []
            for (let i in this.cities) {
              letters.push(i)
            }
            return letters
          }
        },
        data() {
          return {
            touchStatus: false
          }
        },
        methods: {
          handleLetterClick(e) {
            this.$emit('change', e.target.innerText)
          },
          // handleTouch...系列方法是 手指在手机屏幕的右侧字母滑动时,左侧城市列表跟着变化,可以不增加此功能,只有点击字母表城市列表变化也很合理
          handleTouchStart() {
            this.touchStatus = true
          },
          handleTouchMove(e) {
            if (this.touchStatus) {
              // A字母到input框的距离
              const startY = this.$refs['A'][0].offsetTop
              //手指位置到input的距离 = 手指位置距离顶部位置 - header
              const touchY = e.touches[0].clientY - 79
              // 当前手指的字母位置
              const index = Math.floor((touchY - startY) / 20)
              if (index >= 0 && index < this.letters.length) {
                this.$emit('change', this.letters[index])
              }
            }
          },
          handleTouchEnd() {
            this.touchStatus = false
          }
        }
      }
    </script>
    
    <style lang="stylus" scoped>
      @import '~styles/varibless.styl'
     .list
       display flex
       flex-direction column
       justify-content center
       position absolute
       right 0
       top 1.58rem
       bottom 0
       width .4rem
       .item
         line-height .4rem
         text-align center
         color $bgColor
    </style>
    

     

     

     

    展开全文
  • VUE组件:组件的数据传递(props)

    千次阅读 2019-04-09 19:57:37
    组件数据传递props的作用使用props流程①给组件添加props选项②在调用组件时传入实际参数即可③完整代码及效果④使用props传递分析使用props传递数据时的一些细节①传参时,名称格式的问题②传递动态数据③Vue2...
  • vue 组件数据传递

    千次阅读 2019-08-08 08:53:01
    数据传递方式 父组件传递到子组件 子组件 传 父组件 父组件 直接拿子组件数据 子组件直接拿 父组件数据 兄弟组件间传值 ================================================================================== ...
  • vue 组件之间数据传递

    千次阅读 2018-03-16 14:05:08
    传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件传递给子组件需要使用 =&gt;props 在父组件(App.vue)定义一个属性(变量)sexVal = '男' 把该值传递给 子组件(B.vue),如下: App.vue&lt...
  • 主要介绍了Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners),需要的朋友可以参考下
  • 主要介绍了vue父子组件数据传递示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 这个正向的数据传递vue组件中就是通过props来实现的。 子组件 <template> <div> {{title}} </div> </template> <script> export default { props: ['tit
  • vue 多级组件数据传递

    2019-06-21 22:27:00
    A包含B组件,B包含C组件 那么A 传递到C 组件可以通过 在B组件中绑定 $attrs 具体代码可以参见github:https://github.com/qiaoqiao10001/vueAttrs 转载于:https://www.cnblogs.com/qqfontofweb/p/11067093.html...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 48,876
精华内容 19,550
关键字:

vue组件数据传递问题

vue 订阅