Vue组件之间的传值

Vue组件之间的传值

目录

Vue组件之间的传值

1.父传子：

2.子传父：

3兄弟组件传值

---

1.父传子：

在父组件上的子组件标签上绑定一个自定义属性，挂载需要传递的值，在子组件使用props:[ ] 来接受，代码如下：

父组件：

//父组件里，myName是自定义属性， name就是传递的值 
<user-detail :myName="name" />
    
export default {
    components: {
        UserDetail
    }
}
// 子组件
export default {
    props: ['myName']
}

子组件：

//这里是是子组件
props: { myName: String } //这样指定传入的类型，如果类型不对会警告
props: { myName: [String, Number] } // 多个可能的类型
prosp: { myName: { type: String, requires: true } } //必填的的字符串
props: { 
    childMsg: { 
    //指定属性为数组
        type: Array, 
        default: () => [] 
    }
}  // default指定默认值
//如果 props 验证失败，会在控制台发出一个警告。

2.子传父：

子传父就是在父组件绑定自定义事件在子组件调用父组件方法，并且将需要传递的值作为参数传递给父组件，代码如下：

父组件：

// 父组件 绑定自定义事件handleChange
<child @handleChange="changeName"></child>
​
methods: {
    changeName(name) {  // name形参是子组件中传入的值Jack
        this.name = name
    }
}

子组件：

// 子组件 调用父组件的事件
<button @click="changeParentName">改变父组件的name</button>
​
export default {
    methods: {
        //子组件的事件
        changeParentName: function() {
            this.$emit('handleChange', 'Jack') // 触发父组件中handleChange事件并传参Jack
            // 注：此处事件名称与父组件中绑定的事件名称要一致
        }
    }
}

3兄弟组件传值

1.通过 $emit 和 props 结合使用的方式

// 父组件
<child-a :myName="name" />
<child-b :myName="name" @changeName="editName" />  
    
export default {
    data() {
        return {
            name: 'John'
        }
    },
    components: {
        'child-a': ChildA,
        'child-b': ChildB,
    },
    methods: {
        editName(name) {
            this.name = name
        },
    }
}

在子组件B中接收变量和绑定触发事件：

// child-b 组件
<p>姓名：{{ myName }}</p>
<button @click="changeName">修改姓名</button>
    
<script>
export default {
    props: ["myName"],
    methods: {
        changeName() {
            this.$emit('changeName', 'Lily')   // 触发事件并传值
        }
    }
}
</script>
// child-a 组件
<p>姓名：{{ newName }}</p>
    
<script>
export default {
    props: ["myName"],
    computed: {
        newName() {
            if(this.myName) { // 判断是否有值传过来
                return this.myName
            }
            return 'John' //没有传值的默认值
        }
    }
}
</script>

当子组件B 通过 $emit() 触发了父组件的事件函数 editName，改变了父组件的变量name 值，父组件又可以把改变了的值通过 props 传递给子组件A，从而实现兄弟组件间数据传递。