Vue中，子组件修改父组件传递过来的值（父传子）-props接收数据的四种写法

Vue中，子组件修改父组件传递过来的值（父传子）-props接收数据的四种写法

1、props的几种写法

<template>
<!-- 写法二 -->
  <el-pagination
    class="fr page-style"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="pageSizes"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="totalPage"
    background
  >
  </el-pagination>
<!-- 写法三 和 写法四 -->
<div>{{fastTitle}}</div>
</template>
</template>

<script>
export default {
   props: {
      enabled: { // 写法一
        type: Boolean,
        default: false
      },
    },
    
   props: {  // 写法二
    'pageSizes': {
      type: Array,
      default () {
        return [10, 20, 50];
      }
    },
    'pageSize': {
      type: Number,
      default: 10
    },
    'totalPage': Number,
    'currentPage': Number
   },

  // props: ['fastTitle'],  // 写法四（推荐）
  props: { // 写法三
    fastTitle: {
      type: String,
      require: true
    },
    rowData: {
	  type: Object
	},
    name: {
      type: String,
      default: ''
    }
  },
    
    data(){
        return{
            name: data => this.enabled ? '小明' : '小红'  // 写法一
        }
    },
    methods:{
        getList(type){
            let params = {type, rowData: this.rowData, name: this.name};
        }
    }
}
</script>

2、常用方法

一般通过子组件修改父组件传递过来的值,我们就会采用props和$emit进行单向数据绑定。

父组件：

<template>
    <div>
   		<test :value="value" @change="change"></test>
    </div>
</template>

<script>
import test from '@/components/test.vue'
export default {
	components: {
        test
    },
    data() {
        return {
        	name: '父组件的值'
        };
    },
    methods: {
        change (value) {
            this.name = value
        }
    }
}
</script>

子组件:

<template>
    <div>
    	<div>{{ value }}</div>
    	<button @click="change">改变父组件的值</van-button>
    </div>
</template>

<script>
export default {
    props: {
        value: { // 接收的参数
            type: String
        }
    },
    methods: {
        change () {
            this.$emit('change', '子组件调用父组件的change方法修改的')
        }
    },
};
</script>

3、通过.sync修饰符在子组件中修改

父组件：

<template>
    <div>
   		<test :value.sync="value"></test>
    </div>
</template>

<script>
import test from '@/components/test.vue'
export default {
	components: {
        test
    },
    data() {
        return {
        	value: '父组件的值'
        };
    }
}
</script>

子组件：

<template>
    <div>
    	<div>{{ value }}</div>
    	<button @click="change">改变父组件的值</van-button>
    </div>
</template>

<script>
export default {
    props: {
        value: {
            type: String
        }
    },
    methods: {
        change () {
            this.$emit('update:value', '在子组件中修改父组件的值')
        }
    },
};
</script>

4、使用v-model双向数据绑定

父组件：

<template>
    <div>
   		<test v-model="value"></test>
    </div>
</template>

<script>
import test from '@/components/test.vue'
export default {
	components: {
        test
    },
    data() {
        return {
        	value: '父组件的值'
        };
    }
}
</script>

子组件：

<template>
    <div>
    	<div>{{ value }}</div>
    	<button @click="change">改变父组件的值</van-button>
    </div>
</template>

<script>
export default {
    props: {
        value: {
            type: String
        },
    },
    model: {
    	prop: 'value',
    	event: 'changes'
    }
    methods: {
        change () {
            this.$emit('changes', '在子组件中修改父组件的值')
        }
    },
};
</script>