vue父子组件传值-蒲公英云

作者：小小字符链接：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>