组件通信——子传父

Vue传值

Vue.js是一个组件化的前端开发框架，支持父子组件之间的消息传递和数据通信。子组件向父组件传递消息的过程称为“子传父”或“props down，events up”。
具体而言，在Vue.js中，每个组件都可以看作是一个独立的实例，它们之间可以通过特定的Props和Events属性进行双向绑定和通信。子组件在初始化时可以接收来自父组件的数据，并通过props属性绑定这些数据。当子组件需要向父组件发送事件或数据时，可以使用$emit方法触发相应的事件，然后由父组件定义的v-on指令监听并执行相应的操作。
以下是一些关于Vue中props和$emit的常用概念：

1. props：在父组件中通过属性的方式向子组件传递数据或方法，子组件中可以通过props属性来获取相关数据或方法，从而实现父子组件之间的信息共享。
2. emit：在子组件中通过emit触发自定义事件，并携带需要传递的数据，父组件可以通过v-on监听到这些事件，然后执行相应的操作进行响应。
3. sync修饰符： 可以简化子组件向父组件派发事件的过程，添加.sync修饰符后，在父组件中更新子组件的状态时，无需手动监听子组件触发的事件，而是可以直接通过v-model语法糖进行处理，简单来说就是对一个prop进行双向绑定。

总之，“子传父”是Vue中非常重要的一个概念，它可以帮助我们更好地维护组件间的数据和功能的分离，同时也能提高程序的可读性和可维护性。对于在实际开发过程中遇到的“子传父”的问题，需要按照Vue框架的规范和约定来解决问题。

传递数据的三种方式

方式一

通过父组件给子组件绑定一个自定义事件实现：子给父传数据（使用@或v-on）

子组件：通过$emit触发父组件上的自定义事件，发送参数

<template><div class="son"><button @click="setValue">子传值</button></div></template><script>export default {name: "son",data(){return {value:'子传父的内容'}},methods:{setValue(){this.$emit('son',this.value)//触发transfer方法，this.value为向父组件传递的数据}}}</script>

父组件：通过绑定自定义事件，接受子组件传递过来的参数

<template><div class="parent"><p>父组件接手到的内容：{{ value}}</p><Son  @son="getValue"></Son> <!-- 监听子组件触发的自定义事件事件,然后调用getValue方法 --></div></template><script>import son from './Son'export default {name: 'parent',data () {return {msg: '父组件',value:'',}},components:{son},methods:{getValue(value){this.value= value}}}</script>

方式二

props实现：子给父传递数据

子组件：

<template><div class="son"><button @click="setValue">子传值</button></div></template><script>export default {name: "son",props: ['getValue']，data(){return {value:'子传父的内容'}},methods:{setValue(){this.getValue('son',this.value)//this.value为向父组件传递的数据}}}</script>

父组件：

<template><div class="parent"><p>父组件接手到的内容：{{ value}}</p><Son  :getValue="getValue"></Son> </div></template><script>import son from './Son'export default {name: 'parent',data () {return {msg: '父组件',value:'',}},components:{son},methods:{getValue(value){this.value= value}}}</script>

方式三

使用ref

子组件：

<template><div class="son"><button @click="setValue">子传值</button></div></template><script>export default {name: "son",data(){return {value:'子传父的内容'}},methods:{setValue(){this.$emit('son',this.value)//触发transfer方法，this.value为向父组件传递的数据}}}</script>

父组件：

<template><div class="parent"><p>父组件接手到的内容：{{ value}}</p><Son  ref="son" ></Son> <!-- 监听子组件触发的自定义事件事件,然后调用getValue方法 --></div></template><script>import son from './Son'export default {name: 'parent',data () {return {msg: '父组件',value:'',}},components:{son},mounted(){setTimeout(() =>{// 函数体this.$refs.son.$on('son', this.getValue)}, 3000)},  methods:{getValue(value){this.value= value}}}</script>