使用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 :value="y" @update="y = $event" /> 太复杂，可以使用双向绑定简化代码

 <Switch v-model:value="y"  />

Vue2与Vue3的父子数据传递