1. 父组件传递给子组件
用props~若要更改父组件传过来的值,先在子组件里面重新赋值一下,然后再更改赋值的值
父组件把isFlag传递过去
// 父组件
<template>
<div>
<Loading :isFlag='flag'></Loading>
</div>
</template>
<script>
import Loading from './Loading'
export default {
components: {
Loading
},
data () {
return {
flag: true
}
}
}
</script>
<style scoped>
</style>
子组件接受isFlag,然后通过方法想要更改isFlag传递过来的值,如果直接操作的话,会报错,不让你重新写~
所以先存起来 重新命名为loadFlag
// 子组件
<template>
<div>
<p @click='toggle'>点击</p>
{{loadFlag}}
</div>
</template>
<script>
export default {
props: ['isFlag'],
data () {
return {
loadFlag: this.isFlag // 重新赋值为loadFlag
}
},
methods: {
toggle () {
this.loadFlag = !this.loadFlag
}
}
}
</script>
<style scoped>
</style>
再更改即可~
2. 子组件给父组件传值
this.$emit('function name', value)