vue中组件之间传递数据的方法

singerye 发布于2019-08-20 18:19 / 3123人阅读

摘要：在父组件中，需要引用子组件的地方，传入数据。其实这种方法和中控制器之间传递数据的有点类似的。

作用域
在vue中，组件实例的作用域是孤立的，父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。下面几种方法可以实现组件之间数据的传递。

通过prop传递数据

1）在子组件中，使用prop属性，显示的表明，它所需要的数据。
2）在父组件中，需要引用子组件的地方，传入数据。
具体看下面的代码：


//传入数据，注意引号里面的为父组件的数据，

     
Vue.component("my-item",{
    template:"这是组件,{{value}}",
    props:["value"],//声明需要的数据，HTML 特性是不区分大小写的,所以此处如果为驼峰命名法，如：myMessage，则在模板中需要转化为用断线隔开的形式：my-Message
    data:function(){
        return {

        }
    },
    methods:{
        
    }
});

//创建vue实例
const vm=new Vue({
    el:"#app",
    data:{
        value:"这是父组件的数据",
    },
    methods:{
    
    },
});

这种方法适合父组件向子组件传递数据，可以记为：你先告诉我要什么，然后我给你什么。
注意：这种方式是单向数据流，当父组件的属性变化时，将传导给子组件，但是不会反过来。当你想改变prop中数据时，可采用如下方法：定义一个局部变量，并用 prop 的值初始化它，或者使用计算属性。

通过自定义事件

自定义事件可以实现子组件向父组件传递数据，具体方法如下：

1）在子组件中使用$emit(eventName,[...args])触发事件，传递数据
2）在父组件中$on(eventName,callback)监听事件，接受数据作为回调函数的参数，并执行回调函数。
其实这种方法和angular中控制器之间传递数据的有点类似的。注意触发和监听事件的事件类型必须要保持一致，才可接受导数据。具体看下面的例子：


{{number}}





Vue.component("my-item",{
template:"",
data:function(){
    return {
        count : 0,
    }
},
methods:{
    add:function(){
        this.count+=1;
        this.$emit("cli",this.count);//触发当前实例上的事件。多个参数可以数组的形式传递
    }
}
});

//创建vue实例
const vm=new Vue({
el:"#app",
data:{
    number:""
},
methods:{
    totlcli:function(num){//这个回调在父组件监听到事件时，执行的，其参数为触发事件时传递的。
        return this.number=num;
    },
},
});

这样就可以把子组件中的数据通过自定义事件的方式传到了父组件。

使用slot分发内容

主要应用场景是，混合父组件的内容与子组件自己的模板时用到。具体使用步骤：
1）在子组件中，使用slot标签作为组件模板之中的内容分发插槽。  元素自身将被替换。
2）在父组件中，使用slot属性，用于标记往哪个slot中插入子组件内容。
当name相同时，响应的内容就会被插入到子组件中去
具体看下面的例子：


    
        这是头部
        这是多余的内容，
        这是尾部
    


Vue.component("my-item",{
        template:""+
                ""+
                "备用插槽，当没有备用内容会显示出来"+
                ""+
                "",
        props:{
        },
        data:function(){
            return {            
            }
        }
    });
    const vm=new Vue({
        el:"#app",
        data:{
        },
        methods:{    
        },
    });

渲染结构如下：

注意：匿名（没用name属性）的slot元素，作为找不到匹配的内容片段的备用插槽，即在父组件中没有使用slot属性的内容会在这个备用插槽显示。如果没有默认的 slot，这些找不到匹配的内容片段将被抛弃。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84347.html

vue中8种组件通信方式, 值得收藏!

摘要：一父组件通过的方式向子组件传递数据，而通过子组件可以向父组件通信。而且只读，不可被修改，所有修改都会失效并警告。之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？首先我们需要知道在vue中组件之间存在什么样...

BicycleWarrior 2019-08-26 10:44 评论0 收藏0
Vue 单文件中的数据传递

摘要：两个同级组件之间传递数据，通过传递数据。准备工作，我新建了个文件，分别是实例根组件，包含和组件的父组件，的同级组件父组件向子组件传递数据，通过传递数据。 Vue 的单文件组件在使用 Vue 时非常常用，所以我们也会经常遇到组件之间需要传递数据的时候，大致分为三种情况：父组件向子组件传递数据，通过 props 传递数据。子组件向父组件传递数据，通过 events 传递数据。两...

darry 2019-08-20 15:16 评论0 收藏0
vue组件之间通信实录

摘要：一般在的开发中都是模块化开发，所以当涉及到兄弟组件之间的通信的时候，我们可以在入口文件中事先声明一个全局的事件巴士即一个全局的供实例，然后通过他来传导数据。 1、在vue中父组件是通过props传递数据给子组件子组件只接受在子组件中定义过的props的值， Vue.component(child-component, { props: [prop1, prop2], // 定义...

李昌杰 2019-08-20 16:46 评论0 收藏0
vuejs组件通信精髓归纳

摘要：组件的通信和和内置的通信手段一般有两种给元素或组件注册引用信息访问父子实例。有时候两个组件之间需要进行通信，但是它们彼此不是父子组件的关系。详情可参考参考组件之间种组件通信方式总结参考参考组件的分类常规页面组件，由 vue-router 产生的每个页面，它本质上也是一个组件（.vue），主要承载当前页面的 HTML 结构，会包含数据获取、数据整理、数据可视化等常规业务。功能性抽...

妤锋シ 2019-08-23 15:23 评论0 收藏0
vue学习笔记4

摘要：主要当作属性来使用方法表示一个具体的操作，主要书写业务逻辑一个对象，键是需要观察的表达式，值是对应回调函数。父组件向子组件传值组件实例定义方式，注意：一定要使用props属性来定义父组件传递过来的数据 // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: {...

番茄西红柿 2019-04-23 11:45 评论0 收藏0