vue父子组件之间的值传递

vue父子组件之间的值传递

在同一级文件目录下，当前的组件叫父组件，引入的组件叫子组件。

1.父组件向子组件传值

关键字：props

父组件通过子组件的标签绑定普通属性和数据，子组件通过关键字props来接收父组件传来的值，接收时要指定接收数据的数据类型type，类型第一个字母要大写，如Array、String、Number，如果该数据是必传的要设置required:true，如果不是必传就设置默认值 default。

父组件代码：

<template>
    <div>
        <h4>父子组件之间的传值</h4>
        <child :str="str" :arr="arr"/>
    </div>
</template>

<script>
    import Child from './Child.vue'
    export default {
   
        components: {
   Child},
        data() {
   
            return {
   
                str: '我是一个字符串',
                arr: ['arr1','arr2',3