使用props进行传递数据
Vue2
有一个加1 的案例
1.写子组件，并且接收父组件传来的数据
props就是子组件用来声明：我就是用这里面的变量来接收父组件的方法和数据的
<template> <div class="red"> {{message}} <button @click="fn">+1</button> </div> </template> <script> export default { props:['message','fn'] } </script>
2.在父组件中定义数据和方法
在父组件中引入子组件，并且用props声明的变量，来接收父组件传递过来的数据和方法 :message="n" :message接收的是变量n；如果使用的是message="n"那么接收的就是字符串n
<template> <div> <Demo :message="n" :fn="add" /> </div> </template> <script> export default{ components:{Demo}, data:{ n:0 }, methods:{ add(){ this.n+=1; } } } </script>
Vue3父子组件传递数据的过程
父子组件数据传递是一个循环的过程
- 1.首先是调用组件时，传递数据。我把它成为初始化数据
- 2.组件里一系列操作，数据改变后又把数据传递给调用它的组件里（父组件）。我把它成为子组件中处理操作
- 3.父组件接收子组件传过来的数据，父组件数据更新。我把它成为父组件接收更新的数据
要注意的有两点
- 父组件里创建变量并赋值
- 子组件也要创建一个变量，并且接收父组件
现在有一个需求，点击按钮改变颜色位置 复制代码
初始化数据
父组件调用子组件,y是传递给子组件数据
:value用于接收父组件的数据
<Switch :value="y" @update="y = $event" /> <script lang="ts"> import { ref } from 'vue'; import Switch from '../lib/Switch.vue' export default { components: { Switch }, setup() { //初始化数据 const y = ref(false); return { y } } } </script>
子组件中处理操作
:class="{checked:value}" 值为真时将class的名字为checked,若为假就没有类名
props是将变量暴露出去，可以让父组件赋值传递过来
context.emit('update', !props.value) 是将操作后的值传递给父组件，第一个参数就是父组件接收数据时的操作名，第二个参数是更新后的数据
<template> <button :class="{checked:value}" @click="toggle"><span></span></button> </template> <script lang="ts"> import { ref } from 'vue'; export default { props: { value: Boolean }, setup(props, context) { const toggle = () => { context.emit('update', !props.value) } return { toggle }; } } </script>
父组件接收数据
父组件中的@update就是子组件的第一个参数名
$event就是子组件更新后传递出来的值
<Switch :value="y" @update="y = $event" />
注意:上面emit的第一个参数名写的并不规范，组件监听的是value所以第一个参数应该写成 update:value
简化使用v-model
上面的父组件调用子组件 太复杂，可以使用双向绑定简化代码
<Switch v-model:value="y" />
