vue父子组件传值

转载 2018年04月17日 15:28:41

作者:小小字符
链接:https://www.jianshu.com/p/4f2c0acedb04
來源:简书

1.前言

组件是Vue.js最推崇的,也是最强大的功能之一,他的核心目标是为了可重用性高,减少重复性的开发,我们可以把组件代码按着 template、style、script的方式拆分,放置在对应的.vue文件中。组件可以理解我预先定义好的ViewModel类,他的核心包括以下几个:

  • template(模板)最终展示给用户的DOM之间的映射
  • data(初始数据)
  • props(接收的外部参数)用于组件之间的数据的传递和共享。参数默认是单项绑定的(父到子),但也可以显示声明为双向绑定。
  • methods(组件的一些方法)。
  • 生命周期函数 这里不细讲 后期会跟进。

2.组件的使用

之前的一些有关 vue的一些基础知识可以看上一遍文章,这里不再重复。

1)、首先我们在项目中创建一个组件parent.vue 和children.vue两个文件。

父组件:

<template>
    <div>
        <h1>1、组件的引用</h1>
        <h2>我是父组件</h2>
    </div>
</template>

<script>
    export default {
        data(){
            return {

            }
        },
        methods:{
            
        },
components: {

        }
    }
</script>

子组件:

<template>
    <div>
        <h1>我是子组件(引用)</h1>
    </div>
</template>

<script>
    export default {
        data(){
            return {

            }
        },
        methods:{

        }
    }
</script>

接下来我们要做的就是把这个子组件引入到父组件中

import children from './children.vue';

然后我们要做的是在上面的components里面注册一下,之后就可以直接在模板里直接使用组件了。代码如下:

<template>
    <div>
        <h1>1、组件的引用</h1>
        <h2>我是父组件</h2>
        <children></children>
    </div>
</template>

<script>
    import children from './children.vue'
    export default {
        data(){
            return {

            }
        },
        methods:{

        },
        components: {
            children
        }
    }
</script>
2)、接下来我们要做的是父子组件之间的数据传递

因为组件之间的作用于是相互独立的,所以子组建不能直接引用其他组件的数据,因此vue给我们提供了一些数据传递的方式,常用的有以下几种:

  • props
  • 组件通信
  • slot
1、父附件向子组件传值(props)

(1)、字面量语法
父组件需要这样修改:

<template>
    <div>
        <h1>1、组件的引用</h1>
        <h2>我是父组件</h2>
        <!--声明msg要传的值-->
        <children msg="hello"></children>
    </div>
</template>

<script>
    import children from './children.vue'
    export default {
        data(){
            return {
                
            }
        },
        methods:{

        },
        components: {
            children
        }
    }
</script>

在子组件中直接引用我们下面props定义的msg

<template>
    <div>
        <h2>我是子组件(引用)</h2>
        <h2>父子传值(字面量)</h2>
        <p>{{msg}}</p>
    </div>
</template>

<script>
    export default {
        props:['msg'],
        data(){
            return {

            }
        },
        methods:{

        }
    }
</script>

(2)、动态语法
我们需要事先在data里面定义一个变量 name 然后在子组件的标签中 把这个变量通过绑定 赋值给msg1 这就是我们要在props中定义的参数,为了方便这里写在一个组件里。
父组件:

<template>
    <div>
        <h1>1、组件的引用</h1>
        <h2>我是父组件</h2>
        <!--声明msg要传的值-->
        <children msg="hello" :msg1="name"></children>
    </div>
</template>

<script>
    import children from './children.vue'
    export default {
        data(){
            return {
                name:'Masc'
            }
        },
        methods:{

        },
        components: {
            children
        }
    }
</script>

子组件:

<template>
    <div>
        <h2>我是子组件(引用)</h2>
        <h2>父子传值(字面量)</h2>
        <p>{{msg}}</p>
        <h2>父子传值(动态传值)</h2>
        <p>{{msg1}}</p>
    </div>
</template>

<script>
    export default {
        props:['msg','msg1'],
        data(){
            return {

            }
        },
        methods:{

        }
    }
</script>

我们可以在methods中写一些方法 来动态的改变我们定义的变量 name
props默认是单项绑定 我们可以通过下面的绑定修饰符来改变绑定状态。

  • .sync(双向绑定)
  • .noce(单词绑定)
        <!--默认为单项绑定-->
        <children msg="hello" :msg1="name"></children>
        <!--双向绑定-->
        <childen msg="hello" :msg1.sync="name"></childen>
        <!--单词绑定-->
        <childen msg="hello" :msg1.once="name"></childen>
2、组件通信
  • $on() 监听事件
    .$on("你要监听的事件名",function(){})
  • $emit() 触发事件 把事件沿着作用域链向上派发
    .$emit("你要监听的事件名",要传送的数据)

父组件可以通过this.$children来访问他的所有子元素,子组件可以通过this.$parent来访问他的父组件,根实例的后代可以使用this.$root来访问根实例。
接下来我们用一个子组件向父组件传值的例子来说明一下组件之间的通信。
为了方便我们继续在childen.vue中来继续我们的代码。我们需要在子组件中创建一个button标签来 写一个触发事件 ,然后在父组件中监听这个触发事件,代码如下:
父组件

<template>
    <div>
        <h1>1、组件的引用</h1>
        <h2>我是父组件</h2>
        <!--声明msg要传的值-->
        <children msg="hello" :msg1="name"></children>
        <!--父组件接收的信息-->
        <p>{{message}}</p>
    </div>
</template>

<script>
    import children from './children.vue'
    export default {
        data(){
            return {
                name:'Masc',
                message:''
            }
        },
        methods:{

        },
        components: {
            children
        },
        mounted: function () {
            this.$on("sendMessage", function (a) {
                this.message = a;
            })
        }
    }
</script>

子组件:

<template>
    <div>
        <h2>我是子组件(引用)</h2>
        <h2>父子传值(字面量)</h2>
        <p>{{msg}}</p>
        <h2>父子传值(动态传值)</h2>
        <p>{{msg1}}</p>
        <h2>组件通信(自组件传值给父组件)</h2>
        <button @click="sendParentMessage">给父组件发信息</button>
    </div>
</template>

<script>
    export default {
        props:['msg','msg1'],
        data(){
            return {
                msg2:"我是子组件传给父组件的值"
            }
        },
        methods:{
            sendParentMessage:function () {
//都能实现触发事件  建议使用第二种
               //this.$parent.$emit('sendMessage',this.msg2);
                this.$emit('sendMessage',this.msg2)
            }
        }
    }
</script>

当然你也可以通过事件绑定的方式来实现事件监听
子组件代码不变 父组件代码:

<template>
    <div>
        <h1>1、组件的引用</h1>
        <h2>我是父组件</h2>
        <!--声明msg要传的值-->
        <!--事件的监听也可以这样实现  通过v-on绑定 来调用methods中的方法-->
        <children msg="hello" :msg1="name" v-on:sendMessage="sendMessage"></children>
        <!--父组件接收的信息-->
        <p>{{message}}</p>
    </div>
</template>

<script>
    import children from './children.vue'
    export default {
        data(){
            return {
                name:'Masc',
                message:'123'
            }
        },
        methods:{
            sendMessage:function(a){
                this.message = a;
            }
        },
        components: {
            children
        },
        mounted: function () {
//            this.$on("sendMessage", function (a) {
//                this.message = a;
//            })
        }
    }
</script>

这样你就完成了一个通过子组件向父组件发送数据的过程

3、slot 分发内容

在父组件中放入已被 slot 标记的内容,这些内容的顺序可以随意。之后这些内容被分发到子组件的特殊元素 slot 中,根据 name 属性在子组件中重新组合。需要注意的是,内容应该被放在父组件模板中的子组件中
(1)、我们先创建一个新的子组件 叫 children1.vue 同上面一样 需要在父组件中引入并注册
父组件向子组件分发内容:
父组件:

<template>
    <div>
        <h1>1、组件的引用</h1>
        <h2>我是父组件</h2>
        <!--声明msg要穿的值-->
        <!--事件的监听也可以这样实现  通过v-on绑定 来调用methods中的方法-->
        <children msg="hello" :msg1="name" v-on:sendMessage="sendMessage"></children>
        <!--父组件接收的信息-->
        <p>{{message}}</p>
        <h2>slot(内容分发)</h2>
        <children1>
            <!--此处是待分发的内容-->
            <p slot="one">one</p>
            <p slot="two">two</p>
            <p>default</p>
        </children1>
    </div>
</template>

<script>
    import children from './children.vue';
    import children1 from './children1.vue';
    export default {
        data(){
            return {
                name:'Masc',
                message:'123'
            }
        },
        methods:{
            sendMessage:function(a){
                this.message = a;
            }
        },
        components:{
            children,
            children1,
        },
        mounted: function () {
//            this.$on("sendMessage", function (a) {
//                this.message = a;
//            })
        }
    }
</script>

子组件:

<template>
    <div>
        <h1>内容被分发且重新组合</h1>
        <slot>默认分发处</slot>
        <slot name="two"></slot>
        <slot name="one"></slot>
       
    </div>
</template>
<script>
    export default {
        data(){
            return {

            }
        }
    }
</script>

子组件中没有name属性的slot标签 作为默认存放位置,当父组件中的p标签没有被slot标 那么它的内容会自动分发到 默认存放位置。

同样在子组件中定义的数据也可以通过slot传递给父组件
父组件的代码:

<template>
    <div>
        <h1>1、组件的引用</h1>
        <h2>我是父组件</h2>
        <!--声明msg要穿的值-->
        <!--事件的监听也可以这样实现  通过v-on绑定 来调用methods中的方法-->
        <children msg="hello" :msg1="name" v-on:sendMessage="sendMessage"></children>
        <!--父组件接收的信息-->
        <p>{{message}}</p>
        <h2>slot(内容分发)</h2>
        <children1>
            <!--此处是待分发的内容-->
            <p slot="one">one</p>
            <p slot="two">two</p>
            <p>default</p>
            <!--在子组件中定义的变量来渲染父组件-->
            <template slot="nav" slot-scope="props">
                <li>{{props.text}}</li>
            </template>
        </children1>
    </div>
</template>

<script>
    import children from './children.vue';
    import children1 from './children1.vue';
    export default {
        data(){
            return {
                name:'Masc',
                message:'123'
            }
        },
        methods:{
            sendMessage:function(a){
                this.message = a;
            }
        },
        components:{
            children,
            children1,
        },
        mounted: function () {
//            this.$on("sendMessage", function (a) {
//                this.message = a;
//            })
        }
    }
</script>

子组件:

<template>
    <div>
        <h1>内容被分发且重新组合</h1>
        <slot>默认分发处</slot>
        <slot name="two"></slot>
        <slot name="one"></slot>
        <!--<slot> 中还可以作为一个作用域,在子组件中定义变量,然后在父组件中自定义渲染的方式-->
        <slot name="nav" v-for="nav in navs" :text="nav.li"></slot>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                navs: [
                    { li: '琉璃之金' },
                    { li: '朦胧之森' },
                    { li: '缥缈之滔' },
                    { li: '逍遥之火' },
                    { li: '璀璨之沙' }
                ],
            }
        }
    }
</script>

以上就是组件的引用和传值的全部内容




VC6中两个对话框的同时显示 作者:黄基前

 对于VC++初学者,可能会遇到这样一个问题:一个基于Dialog的MFC AppWizard应用程序,再Insert一个对话框,如何同时显示这两个对话框呢? ---- 其实这个问题很简单,想要在屏幕...
  • ghj1976
  • ghj1976
  • 2001-01-09 10:47:00
  • 1392

vue父子组件互相传值

官网上有较详尽的介绍:http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1 以下是本人项目实践后...
  • sinat_30691131
  • sinat_30691131
  • 2016-10-07 22:31:47
  • 2103

vue基础语法以及父子组件如何相互传值

vue模板引擎语法,关注数据层面 Mustache语法:{{msg}} 主要是用date控制 html赋值:v-html=”“ 绑定属性:v-bind:id=”“ 使用表达式:{OK?”yes”:”...
  • zhang5207892
  • zhang5207892
  • 2017-11-05 20:49:28
  • 1529

vue2.0 .vue文件非父子组件传值问题

前一篇我们谈过这个问题,在上一篇中我们是在main.js中定义空的bus.大家如果自己写个简单的demo是可以实现的,但是在项目中如果有路由存在的话,则会失效!那么在有路由的情况下如何在非父子组件中传...
  • weixin_37794497
  • weixin_37794497
  • 2017-08-22 15:47:50
  • 1609

Vue2.0的三种常用传值方式、父传子、子传父、非父子组件传值

Vue2.0 传值方式:在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我们...
  • lander_xiong
  • lander_xiong
  • 2018-01-09 23:31:13
  • 659

vue.js单文件组件中非父子组件的传值

vue.js单文件组件中非父子组件的传值最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! ...
  • weixin_37794497
  • weixin_37794497
  • 2017-08-17 18:07:35
  • 615

vue父子组件传值,实现深度监听对象,双向绑定

实现原理:首先获取数据,然后传递给子组件,然后通过$emit函数触发父组件事件,更新父组件的数据,那么传递给子组件的数据也就更新了,在实现子组件更新数据的时候,传递过来的是一个对象,那么我们就需要深度...
  • qq_22753743
  • qq_22753743
  • 2018-01-31 18:08:14
  • 231

前端框架Vue(8)——子父组件的传参通信

父子间的通信传值是 vue 中的一个重要的内容和掌握点。  *vue2.0 推荐使用 vuex,全局进行状态管理。(后面再讲)  首先讲一下遇到的 需求背景: 解释一下:   组件之间的关系: ...
  • DOCALLEN
  • DOCALLEN
  • 2017-04-14 15:26:40
  • 14306

react入坑之父子组件之间的传值

实例:http://blog.csdn.net/haoaiqian/article/details/75934477 采用bind(this)可以防止this指向不明确的问题,这里设置了bi...
  • chiuwingyan
  • chiuwingyan
  • 2017-11-26 22:39:57
  • 170

vue2.0父子组件以及非父子组件通信传参详解

1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: parent> child :child-msg="msg">/child>//这里必须要...
  • binginsist
  • binginsist
  • 2017-04-01 10:30:42
  • 11089
收藏助手
不良信息举报
您举报文章:vue父子组件传值
举报原因:
原因补充:

(最多只允许输入30个字)