Vue父子组件数据传递

妖狐艹你老母 2022-04-27 23:12 274阅读 0赞

### 父组件向子组件传值,通过props，单项绑定，只能传值给子组件，防止改变父组件的值 ###

1、父组件

<template>
        <Child :info='msg'></Child>
    </template>
    <script> import Child from './Child.vue' export default( components:{ Child }, data(){ return { msg:'父组件' } } ) </script>
    复制代码

2、子组件

<template>
        <div>
            <span>父组件传递的值：{
        {msg}}</span>
        </div>
    </template>
    <script> export default( props:['info'], data(){ return { msg:this.info } } ) </script>
    复制代码

props指定类型：

props:{
            title: String,
            likes: Number,
            isPublished: Boolean,
            commentIds: Array,
            author: Object
        }
    复制代码

### 子组件向父组件传递数据 ###

$on(eventName)监听事件
    $emit(eventName)触发事件
    复制代码

<template>
        <Child @sonMethod='fatherMethod'></Child>
    </template>
    <script> import Child from './Child.vue' export default( components:{ Child }, data(){ return { msg:'父组件' } }, methods:{ sonMethod(data){ console.log(data) } } ) </script>
    
    <template>
        <div>
            <button @click='sendToFather'>子按钮</button>
        </div>
    </template>
    <script> export default( data(){ return { msg:'11' } }, methods:{ sendToFather(){ this.$emit('sonMethod',this.msg) } } ) </script>
    复制代码

### 父子组件数据同步 ###

<my-dialog :visible.sync="dialogVisible" />
    等价于
    <my-dialog  :visible="dialogVisible"  @update:visible="newVisible=> dialogVisible = newVisible"/>
    
    my-dialog 组件在 visible 变化时 this.$emit('update:visible', newVisible) 即可。
    复制代码

发表评论取消回复

表情：

评论列表（有 0 条评论，274人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue父子组件之间传递数据

父向子：v-bind()+props 父组件绑定属性向子组件传递数据，子组件通过props进行数据的接收。父组件代码如下： <template>

怼烎@/ 2023年09月28日 11:59/ 0 赞/ 131 阅读

相关 vue 父子组件之间数据传递与同步

父子组件之间是不能够使用 v-model 来绑定值的，因为如果有子组件中修改值，而无法同步到父组件的，所以如果使用 v-model 来绑定，vue 会报错： vue.esm.

朴灿烈づ我的快乐病毒、/ 2023年07月02日 03:20/ 0 赞/ 18 阅读

相关 Vue 非父子组件传递值

第一种传值方式，通过事件总线其实就是通过一个公共的js文件，专门用来传递消息创建 src/util/bus.js import Vue

淡淡的烟草味﹌/ 2023年05月31日 06:48/ 0 赞/ 13 阅读

相关非父子组件的数据传递

复制代码可以直接查看效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset=

末蓝、/ 2022年06月09日 12:40/ 0 赞/ 237 阅读

相关 vue2.0父子组件间传递数据

关于父子组件之间传递数据其实文档上都说得很明白。但是如果完全不懂的人做计也看不懂，下面是一个小例子，有两个文件 1.parent.vue <template

蔚落/ 2022年06月01日 09:29/ 0 赞/ 239 阅读

相关父子组件的数据传递

<counter :count="0"></counter> <counter :count="1"></counter>加冒号0是数字，不加冒号0是字符父组件向

冷不防/ 2022年05月25日 13:59/ 0 赞/ 236 阅读

相关 Vue父子组件数据传递

父组件向子组件传值,通过props，单项绑定，只能传值给子组件，防止改变父组件的值 1、父组件 <template> <Child :info=

妖狐艹你老母/ 2022年04月27日 23:12/ 0 赞/ 275 阅读

相关 vue父子组件之间怎样通信怎样传递数据

首先，新建一个子组件MyChild ,然后在子组件的props属性里设置一个属性来接收外部传来的值，我这里叫outData,然后设置接收的数据类型是String,并且用def

不念不忘少年蓝@/ 2021年11月09日 06:34/ 0 赞/ 407 阅读

相关 vue父子组件间互相传递数据

vue父子组件间传递参数 1.父传子使用 props 向子组件传递数据。在父组件中定义 hMsg参数，v:bind 绑定childMsg的值为hMsg；子组

心已赠人/ 2021年11月02日 06:58/ 0 赞/ 421 阅读

相关 react父子组件数据传递

子传父 1.首先父组件设定一个自定义函数 getChildDatas = (values) => { //...业务代码 } 2.将该

雨点打透心脏的1/2处/ 2021年10月01日 02:28/ 0 赞/ 427 阅读