【Web全栈】Vue：父子组件传参

Breyce

已于 2022-10-09 10:02:54 修改

阅读量328

点赞数

分类专栏： Web全栈文章标签：前端 vue.js javascript

于 2022-10-09 10:00:41 首次发布

本文链接：https://blog.csdn.net/Breyce/article/details/127220898

版权

Web全栈专栏收录该内容

2 篇文章 0 订阅

订阅专栏

他爹听到自己孩子在鬼嚎，走到他的身边，接过他要给的玩具：

完整代码

父组件向子组件传参：

子组件向父组件传参：

看完父子组件传参，脑子里不由得出现了一个画面：孩他爹找到了自己的孩子，给了他玩具；孩子要找他爹，在茫茫小孩中大喊“老爸！”，然后他爹认出来这是自己孩子，从他手里接过玩具。

父组件给子组件传参

父组件直接绑定在子组件的标签上，子组件通过props接收传递过来的参数并存入定义的data属性当中。

类比起来的话就是孩子伸手找他爹要玩具，他爹把玩具放到孩子手上，孩子拿到就放到了兜里。这个props就像那只手，他爹给的玩具孩子只用手来接，定义的data就像衣服兜。

孩他爹找到自己的孩子给玩具：

首先要在父组件当中找到要传参的那个子组件。然后，在父组件当中引用并将其绑定一个属性，其值为要传给子组件的值。而绑定的这个属性是子组件用来接收传过来的值的那个属性的名称：

<son :data="value"></son>

这里son是我们定义的子组件，data是在子组件当中用来接收数据的属性，value是我们要传的值。

<template>  
    <div>  
        <h3>孩他爹</h3>  
          
        <input type="text" v-model="value" />  
        <!-- 使用子组件 -->  
        <son :data="value"></son>  
          
    </div>  
</template>

孩子从他爹手中接过苹果：

①首先定义一个子组件叫son。

②在子组件里面设置一个data属性（这个data属性设置在props里面而不是return里面。在props当中声明的属性已经相当于在return中声明了），用来表示和存储父组件传过来的数值。

③用props声明一下这个数值是父组件传过来的参数。

<template>  
    <view>  
        <h3>子组件</h3>  
        <h4>{{data}}</h4>  
    </view>  
</template>  
  
<script>  
    export default {  
        props:['data'],  //props接收参数的方式也有好几种，另起文章说
        data() {  
            return {}  
        }  
    }  
</script>

子组件给父组件传参

关键点是：this.$emit(eventName, value) 子组件当中的这个方法。

$emit方法接收两个参数，eventName是事件名称，父组件需要用该名称接收参数，value是需要传递的值。

        为什么我感觉像是小孩子在原地大喊呢。

        因为这里就好像这孩子不直接找到自己爹，而是emit，emit是发出的意思，所以就像这个小孩玩完玩具要还回去的时候突然不记得他爹是谁了，然后大喊自己和爹约定的暗号，避免让别人知道自己没爹过来瞎认领。

        然后孩他爹走过来，用手接过了小孩要给他的玩具。

** 本例中子组件的基本配置——一些框架和一个用来触发事件的button：

<template>  
    <div>  
        <input type="text" v-model="toy" />  
        <button @click="send">找爹还玩具</button>  
    </div>  
</template>

孩子站在原地大喊：

子组件定义一个函数，一旦发生什么事件触发了这个函数——比如小孩走丢了开始嚎——然后就会 emit 出去两个东西，eventName和value。

<script>  
    export default {  
        data() {  
            return {  
                toy:''  
            }  
        },  
        methods: {  
            send(){  
                this.$emit('signal',this.toy);  
            }  
        }  
    }  
</script>

他爹听到自己孩子在鬼嚎，走到他的身边，接过他要给的玩具：

父组件当中在标签当中增加一个属性，这个属性的名称和子组件 emit 的 eventName 要一样，然后把这个属性和一个方法进行绑定。

<template>  
    <son @signal="hearSignal"></son>  
</template>

一旦接收到了和属性名称相同的emit，就会触发绑定的方法。

methods: {  
    hearSignal(toy){  
        this.hands = toy;  
    }  
}

在这个函数当中我们可以做很多操作，比如上面就是把子组件传过来的signal放到“手”里去

完整代码

父组件向子组件传参：

父组件代码：

<template>  
    <div>  
        <h3>父组件</h3>  
          
        <input type="text" v-model="value" />  
        <!-- 引用子组件 -->  
        <son :data="value"></son>  
          
    </div>  
</template>  
  
<script>  
    import son from '@/views/son.vue' //引入子组件  
    export default {  
        data() {  
            return {  
                value:'一个玩具', // 要传递给子组件的值  
            }  
        },  
        components: { //注册子组件  
            son  
        }  
    }  
</script>

子组件代码：

<template>  
    <view>  
        <h3>子组件</h3>  
        <h4>{{data}}</h4>  
    </view>  
</template>  
  
<script>  
    export default {  
        props:['data'], // 用props去接收父组件传过来的值。  
        data() {  
            return {} //在props当中定义过data之后不用再在data当中定义data  
        }  
    }  
</script>

子组件向父组件传参：

子组件代码：

<template>  
    <view>  
        <h3>子组件</h3>  
        <input type="text" v-model="toy" />  
        <button @click="send">找爹还玩具</button>  
    </view>  
</template>  
  
<script>  
    export default {  
        data() {  
            return {  
                toy:''  
            }  
        },  
        methods: {  
            send(){  
                this.$emit('signal',this.toy);  
            }  
        }  
    }  
</script>

父组件代码：

<template>  
    <view>  
        <h3>父组件: {{ hands }}</h3>  
        <br>  
        <son @signal="hearSignal"></son>  
    </view>  
</template>  
  
<script>  
    import son from '@/views/son.vue'  
    export default {  
        data() {  
            return {  
                hands:''  
            }  
        },  
        methods: {  
            hearSignal(toy){  
                this.hands = toy;  
            }  
        },  
        components: {  
            son  
        }  
    }  
</script>