vue 组件传值父子组件之间传值子父组件之间的传值以及兄弟之间组件传值

组件传值父子组件之间传值子父组件之间的传值以及兄弟之间组件传值"/>

vue 组件传值父子组件之间传值子父组件之间的传值以及兄弟之间组件传值

父子组件间的传值

一、子组件访问父组件的数据

方式一 ：子组件直接访问父组件的数据

父组件在调用子组件时，绑定想要获取的父组件中的数据，在子组件内部，使用 props 选项声明获取的数据，即接收来自父组件中的数据。
在vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息

父组件

<template><div><div>父组件</div> <div class="hello"><h3>我是 App 父组件</h3><h4>访问自己的数据：{{msg}},{{name}},{{user.id}}</h4><hr><!-- 1. 在调用子组件时，绑定想要获取的父组件中的数据 --><showdata :message="msg" :name="name" :user="user"></showdata></div></div></template>
<script>
// 引入 zitu 组件
import showdata from './zizu'
export default {data(){return {msg:'父组件',name:'传值',age:'18',user:{id:1234,userName:'zizujian'}}},// 注册 Hello 组件components:{showdata} 
}
</script>
<style scoped></style>

子组件

<template><div><div>子组件</div><div class="hello"><h3>我是 hello 子组件</h3><!-- 在页面中直接渲染即可 --><h4>访问父组件中的数据： {{message}},{{name}},{{user.id}}</h4></div></div>
</template>
<script>
export